バンドルファイルの分析(Vue.js, Nuxt.js)

Webpack Bundle Analyzerを利用すると、バンドルサイズを可視化できます。可視化することで「容量の大きいモジュールの把握」「複数ページで共通モジュールを保持してないかの確認」といった分析がしやすくなります。

バンドルファイルの確認方法

Webpack Bundle Analyzer

Webpack Bundle Analyzer を利用してバンドルファイルを分析できます。

Vue CLI で生成したプロジェクトや Nuxt.js であれば、すぐに利用できる状態になっています。

Vue CLIの場合

Vue CLI で生成したプロジェクトであれば、 yarn run build --report を実行すると、Webpack Bundle Analyzer によるレポートファイルも一緒に生成されます。

$ yarn run build --report
yarn run v1.13.0
$ vue-cli-service build --report

⠴  Building for production...

 DONE  Compiled successfully in 4299ms                                                                                                                          3:36:45 AM

  File                                 Size               Gzipped

  dist/js/chunk-vendors.b131be2b.js    116.10 KiB         40.47 KiB
  dist/js/app.04a43c6b.js              6.32 KiB           2.27 KiB
  dist/js/about.77c93d06.js            0.44 KiB           0.31 KiB
  dist/css/app.20fcb143.css            0.42 KiB           0.26 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
✨  Done in 7.53s.

dist配下に report.html が生成されます。

$ open dist/report.html 
625-vuejs-webpack-bundle-analyzer_vue_clie.png

参考

Nuxt.jsの場合

yarn build --analyze を実行すると、nuxt build --analyze が実行されて、レポートを確認できます。

625-vuejs-webpack-bundle-analyzer_nuxt.png

試しに Vuetify をインストールしているのですが、容量の大きさが目立ちます。

バージョンは以下の通りです。

$ yarn list | grep nuxt | grep -v @nuxt
├─ nuxt@2.4.5
$ 
$ yarn list | grep vuetify
├─ vuetify@1.5.4

参考

Vuetifyの容量を軽減する

対応方法

Vuetifyの全コンポーネントを含めると容量が大きくなります。利用しているコンポーネントだけ含めるように対応します。

対応方法ですが、下記ページに記述されています。

ここでは、vuetify-loader を利用した対応方法を確認します。自動的に利用しているコンポーネントだけ含まれるようになります。

vuetify-loader

vuetify-loader をインストールします。

$ yarn add -D vuetify-loader

ソースも修正します。差分を示します。

-// Import Vuetify styling
-@require '~vuetify/src/stylus/main.styl'
 import Vue from 'vue'
-import Vuetify from 'vuetify'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
 import colors from 'vuetify/es5/util/colors'
+import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
 const pkg = require('./package')
 
   build: {
+    plugins: [
+      new VuetifyLoaderPlugin()
+    ],
+    transpile: [/^vuetify/],
+
     /*
     ** You can extend webpack config here
     */

対応後のバンドルファイルは以下のようになりました。

625-vuejs-webpack-bundle-analyzer_nuxt2.png

Nuxt.js > チャンクの分割(splitChunks)

Nuxt.jsの場合、splitChunks でチャンクを分割できます。

デフォルトで layoutsfalse なのですが、true にして動作確認します。

   build: {
+    splitChunks: {
+      layouts: true,
+      pages: true,
+      commons: true
+    },
+
     plugins: [
       new VuetifyLoaderPlugin()
     ],

結果は以下の通りです。

625-vuejs-webpack-bundle-analyzer_nuxt3.png

vendors.app.js に含まれていた /layouts の情報が分離されました。

参考