guess-js/guess: Libraries & tools for enabling Machine Learning driven user-experiences on the web を Client JavaScript として使用するためのリポジトリです。
Build 後の JavaScript サイト上で読み込むと、guess-js によるコンテンツの先読みを行います。
Frontend の JavaScript が薄いサイトで、このリポジトリを clone、build し生成した JavaScript を使うことを想定しています。
git clone https://github.com/kemsakurai/guess-webpack-starter.git
rm -Rf .git- インストール
npm install- コマンド一覧
$ npm run
Lifecycle scripts included in guess-webpack-starter:
test
test
available via `npm run-script`:
build:dev
webpack-cli --mode development
build:prod
webpack-cli --mode production- webpack.config.js の VIEW ID の設定
webpack.config.js の GA: '103185238' に取得対象の Googlle Analytics プロパティの VIEW ID を設定します。
new GuessPlugin(
{ GA: '103185238',
debug: true,
runtime: {
basePath: '',
// true > PrefetchPlugin 、false > PrefetchAotPlugin の切替を行う
delegate: true,
// 回線ごとの閾値の指定
prefetchConfig: {
'4g': 0.15,
'3g': 0.25,
'2g': 0.45,
'slow-2g': 0.6
}
}
})- プロダクションビルド
npm run build:prodこれで dist フォルダ 直下 に 圧縮された guess-bundle.js が生成されます。
- ディベロッパービルド
npm run build:devこれで dist フォルダ 直下 に 非圧縮の guess-bundle.js が生成されます。
HTMLカスタムタグで、以下のようなタグを作成し、ページビュー トリガーでタグを発火させます。
<script type="text/javascript" async src="guess-bundle.js"></script>これで、DOMContentLoaded のタイミングで次に遷移する確率が高いページを先読みします。
以下にGithub 上で見つけた設定例を記載します。
- reportProvider の設定例
mix.webpackConfig({
plugins: [
new GuessPlugin({
reportProvider() {
return Promise.resolve(JSON.parse(readFileSync('./guess-routes.json')))
}
})
]
})Cannot read property 'guess' of undefined · Issue #83 · guess-js/guess
- routeFormatterの設定例
new GuessPlugin({
GA: '128035004',
period: {
startDate: new Date('2016-1-1'),
endDate: new Date('2018-2-24')
},
routeProvider() {
return parseRoutes('.');
},
runtime: {
delegate: false
},
routeFormatter(r) {
return r.replace(/^\/app/, '');
}
})guess-js-react-demo/webpack.config.prod.js at master · mgechev/guess-js-react-demo
MIT