MANABIYA #2 - teratail developer days - | Peatix に
結果を
Guess.js に ついて
gatsby-plugin-guess-js | GatsbyJS に
- HTML ページを
生成すると、 ユーザーが 訪問する 可能性の ある ページに リソースのが 自動的に 追加される。 - ユーザーが
サイトを 読み 込んで 他ページに アクセスすると、 プラグインは どの ページが 訪問されているか 予測し 続け、 リソースの 先読みも 行う。
guess/client.ts at master · guess-js/guess
を
Google Analytics の
参考文献の
前提
- gatsby の
version gatsby -v 2.4.5
npm list --depth 0 % npm list --depth 0 gatsby-starter-material@2.0.0 /xxxx/Bitbucket/portfolio ├── cli-glob@0.1.0 ├── eslint@5.9.0 ├── eslint-config-airbnb@17.1.0 ├── eslint-config-prettier@3.3.0 ├── eslint-plugin-import@2.14.0 ├── eslint-plugin-jsx-a11y@6.1.2 ├── eslint-plugin-react@7.11.1 ├── font-awesome@4.7.0 ├── gatsby@2.0.40 ├── gatsby-image@2.0.19 ├── gatsby-plugin-catch-links@2.0.6 ├── gatsby-plugin-feed@2.0.9 ├── gatsby-plugin-google-tagmanager@2.0.6 ├── gatsby-plugin-lodash@3.0.2 ├── gatsby-plugin-manifest@2.0.7 ├── gatsby-plugin-netlify-cms@3.0.6 ├── gatsby-plugin-nprogress@2.0.6 ├── gatsby-plugin-offline@2.0.12 ├── gatsby-plugin-react-helmet@3.0.1 ├── gatsby-plugin-sass@2.0.3 ├── gatsby-plugin-sharp@2.0.12 ├── gatsby-plugin-sitemap@2.0.2 ├── gatsby-plugin-twitter@2.0.7 ├── gatsby-remark-autolink-headers@2.0.10 ├── gatsby-remark-copy-linked-files@2.0.6 ├── gatsby-remark-images@2.0.6 ├── gatsby-remark-prismjs@3.0.3 ├── gatsby-remark-relative-images@0.2.0 ├── gatsby-remark-responsive-iframe@2.0.6 ├── gatsby-source-filesystem@2.0.8 ├── gatsby-transformer-remark@2.1.11 ├── gatsby-transformer-sharp@2.1.8 ├── gh-pages@2.0.1 ├── lodash@4.17.11 ├── moment@2.22.2 ├── netlify-cms@2.1.3 ├── node-sass@4.10.0 ├── prettier@1.15.2 ├── prismjs@1.15.0 ├── react@16.6.3 ├── react-disqus-comments@1.4.0 ├── react-dom@16.6.3 ├── react-helmet@5.2.0 ├── react-md@1.9.0 ├── react-share@2.4.0 ├── react-twitter-widgets@1.7.1 ├── remark-cli@6.0.1 ├── remark-preset-lint-recommended@3.0.2 ├── stylefmt@6.0.3 ├── stylelint@9.8.0 ├── stylelint-config-standard@18.2.0 ├── uglifyjs-webpack-plugin@2.0.1 ├── url-join@4.0.0 └── write-good@0.13.1
インストール 、 ビルド
npm で
インストール npm i gatsby-plugin-guess-js
gatsby-config.js に
設定を 追加する
VIEW_ID
には、Google Analytics の サイトの VIEW_ID を 設定します。
minimumThreshold
最小値ですので抽出対象と する 下限値を コントロールする 値かと 思われますが、 ドキュメントが 見当たりませんでした。 // In your gatsby-config.js module.exports = { plugins: [ { resolve: "gatsby-plugin-guess-js", options: { // Find the view id in the GA admin in a section labeled "views" GAViewID: `VIEW_ID`, minimumThreshold: 0.03, // The "period" for fetching analytic data. period: { startDate: new Date("2017-1-1"), endDate: new Date(), }, }, }, ], }
サイトを
ビルド、 Google の アカウントで 認証を 通す
以下、コマンドで サイトを ビルドします。 ビルド中にgatsby build
ブラウザが 立ち上がり、 Google の アカウントでの 認証を 求められます。
guess-js にアクセス許可を 与えます。
成功すると謎の 手が 表示されます。
しばらく待つと ビルドが 進みます。 Generated public/sw.js, which will precache 7 files, totaling 373415 bytes. info Done building in 302.305 sec
ビルド後の 変化
cms.js に、
実際に<link prefetch>
の
ページ VIEW が
Webpack の
参考
以下、
以上です。
コメント