バンドルファイルの肥大化問題解消にみる Nuxt.jsの成熟化 November 18, 2018 Wakamatsu Hisashi Front-end engineer CyberAgent, Inc.

若松 良（Wakamatsu Hisashi） Front-end engineer 経歴 - 大学卒業後、映像制作に携わる - 2012年にCAに中途入社 - フロントエンドエンジニアとして複数のサービスの立上げ、運用に携わる - 現在、コスメのクチコミサイト「 Lulucos by.S」の開発を担当 自己紹介

Vue.js + Nuxt.jsを使ってB2Cサービスを作った話 　- なぜNuxt.jsを採用したか 　- 採用して良かった点 　- 困難だった点 　- 採用してどうだったか 前回、話したこと https://speakerdeck.com/wakamatsu/vue-dot-js-plus-nuxt-dot-js-woshi-tuteb2csabisuwozuo-tutahua

サービスを運用し、機能を拡張していく中で直面した問題、とりわけバンド ルファイルのサイズに関する問題が、Nuxt2でどのように解消されるか、そ のことを踏まえてNuxt.jsについて考えたこと 今回、話すこと

サービスを運用し、機能を拡張していく中で直面した問題、とりわけバンド ルファイルのサイズに関する問題が、Nuxt2でどのように解消されるか、そ のことを踏まえてNuxt.jsについて考えたこと 今回、話すこと アジェンダ 1. Nuxt v1のファイルサイズ問題 2. それがNuxt2でどのように解消されたか 3. Nuxt.jsを使って開発する上で大事だと思うこと

Congrats on the release Nuxt2 !!

Nuxt2 major changes ・We now use Webpack 4. ・ESM is supported everywhere ・Upgraded to use Babel 7 ・ ・ ・

Nuxt2 major changes ・We now use Webpack 4. ・ESM is supported everywhere ・Upgraded to use Babel 7 ・ ・ ・

1. Nuxt v1のファイルサイズ問題

1. Nuxt v1のファイルサイズ問題 ・Write Vue Files ・Automatic Code Splitting ・Server-Side Rendering ・Bundling and minifying of your JS & CSS Nuxt.jsを使うメリット ・ ・ ・

・Write Vue Files ・Automatic Code Splitting ・Server-Side Rendering ・Bundling and minifying of your JS & CSS Nuxt.jsのボトルネック ・ ・ ・ 1. Nuxt v1のファイルサイズ問題

Automatic Code Splitting（v1） new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: this.getFileName('vendor'), minChunks(module, count) { // A module is extracted into the vendor chunk when... return ( // If it's inside node_modules /node_modules/.test(module.context) && // Do not externalize if the request is a CSS file or a Vue file which can potentially emit CSS assets! !/\.(css|less|scss|sass|styl|stylus|vue)$/.test(module.request) ) } }) node_modules/nuxt/lib/builder/webpackclient.config.js webpack3のCode splittingはCommonChunkPluginが使われている。 1. Nuxt v1のファイルサイズ問題

└ コアライブラリ 　 ['vue', 'vue-router', 'vue-meta', 'vuex' ] └ node_modules配下の各モジュール └ build設定(nuxt.config.js)のvendorプロパティで指定されたリソース build: { 　vendor: [ 　　'~/plugins/lottie_light' 　] } Automatic Code Splitting（v1） vendor.{hash_id}.js 1. Nuxt v1のファイルサイズ問題 app.jsから以下のリソースが vender.jsとして切り出される。

1. Nuxt v1のファイルサイズ問題 build: { 　vendor: [ 　　'~/plugins/lottie_light' 　] } Automatic Code Splitting（v1） vendor.{hash_id}.js プロジェクト側でコントロールできるのは赤枠部分。 └ コアライブラリ 　 ['vue', 'vue-router', 'vue-meta', 'vuex' ] └ node_modules配下の各モジュール └ build設定(nuxt.config.js)のvendorプロパティで指定されたリソース

Automatic Code Splitting（v1） ビルド設定（nuxt.config.js）のインターフェースが柔軟性を欠いている。つまり、コード分割を細かくコン トロールできない。 build: { 　vendor: [ 　　'~/plugins/lottie_light' 　] } vendor.a6c939abc5a7898764ab.js 1.02 MB [big] 1. Nuxt v1のファイルサイズ問題 nuxt.config.js build log

build: { 　vendor: [ 　　'~/plugins/lottie_light', 　　'axios', 　　'so_big_size_module' 　] } vendor.a6c939abc5a7898764ab.js 3.05 MB [big] Automatic Code Splitting（v1） アプリケーションが拡大し、使用するライブラリがやむなく増えていく場合、 vendor.jsは肥大化する一 方。 1. Nuxt v1のファイルサイズ問題 build: { 　vendor: [ 　　'~/plugins/lottie_light' 　] } vendor.a6c939abc5a7898764ab.js 1.02 MB [big] nuxt.config.js build log

Automatic Code Splitting（v1） vendor.jsのファイルサイズが増加しロード時間が長くなれば、その分エントリーポイントの評価タイミン グも後ろ倒しになり、当然パフォーマンスに影響が出る。 1. Nuxt v1のファイルサイズ問題

ファイルサイズを削減するために import map from 'lodash/map'; import filter from 'lodash/filter'; 当たり前の方法として、関数、必要なリソースだけを読み込む import _ from 'lodash'; import map from 'aws/lib/core'; import AWS from 'aws-sdk'; 1. Nuxt v1のファイルサイズ問題

ファイルサイズを削減するために 1. Nuxt v1のファイルサイズ問題 問題が決定的に回避できるわけではない。

ビルド設定でmaxChunkSizeプロパティを設定する。指定された byte数を超えるサイズの jsファイル はすべて分割対象となる。 vendor (1.1 MB) manifest.c5cc2102595651e00441.js vendor.0c9ba1268eb6fa692f47.js ファイルサイズを削減するために（v1.2.1 ~ 1.4.1） vendor (1.1 MB) manifest.c5cc2102595651e00441.js 80.6050986d5f9998dcaa18.js 81.75c4882365a94622957a.js 79.bb302dbc3b96ea906f62.js 77.113ff3550fc52148e78f.js 85.beb74e34b1c248dcadbe.js 76.90d657a2974f28569191.js 78.e12c9424fa31329e728a.js 84.ae13f0727eb66b588ef3.js 82.23a9ac9f9b36eb3a2a01.js vendor.0c9ba1268eb6fa692f47.js build: { 　maxChunkSize: 300000 } 1. Nuxt v1のファイルサイズ問題 nuxt.config.js build log

ファイルサイズを削減するために（v1.2.1 ~ 1.4.1） ロード時間を短縮することができるが、平行しての接続数に制約がない http/2でのみ有効 な手段。根本的な解決にはなっていない。 1. Nuxt v1のファイルサイズ問題

2. Nuxt 2でどのように解消されたか

webpack4のcode splittingはoptimization.splitChunksが使われている。 Nuxt2における対応 optimization() { const optimization = super.optimization(); // Small, known and common modules which are usually used project-wise // Sum of them may not be more than 244 KiB if ( this.options.build.splitChunks.commons === true && optimization.splitChunks.cacheGroups.commons === undefined ) { optimization.splitChunks.cacheGroups.commons = { test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmedia te|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/, chunks: 'all', priority: 10, name: true }; } return optimization } 2. Nuxt2でどのように解消されたか

optimization.splitChunkの仕様に沿って、build設定で柔軟に設定ができるようになった。 インターフェースも素直。直接設定するのと変わりがない。 optimization.splitChunkの仕様によるところ も大きいが、柔軟な設定が可能になった一例でもある。 build: { 　　optimization: { splitChunks: { cacheGroups: { vendor: { test: /node_modules/, name: 'vendor', chunks: 'initial', enforce: true, priority: 1 }, awsModules: { test: /(node_modules\/aws-sdk)|(node_modules\/amazon-cognito-identity-js)/, name: 'aws-modules', chunks: 'initial', enforce: true, priority: 10 } } } } } Nuxt2における対応 2. Nuxt2でどのように解消されたか

nuxt.config.js 細かい設定が可能になっている分、 Splittingに関する設定も増えている。 layoutsはデフォルトではfalse になっている。サービス規模にもよるが、ボリュームがそれなりの場合は、 layoutもその対象（true）とし たい。 build: { splitChunks: { layouts: false, pages: true, commons: true }, } ファイルサイズに関して 2. Nuxt2でどのように解消されたか nuxt.config.js

nuxt.config.js v1とNuxt2のBuildプロパティ比較 2. Nuxt2でどのように解消されたか v1 Nuxt2 node_modulesのnuxtパッケージを見る限り、 build設定の項目に関する記述が v1が40行程であるのに対 し、Nuxt2は100行を超えている。単純に比較することはできないが、 Build設定の柔軟性が向上したことの 一つの証左といえる。

3. Nuxt.jsを使う上で大事だと思うこと

Nuxt.jsの成熟化 ベストプラクティスの集合に加え、各種設定も各プロジェクトに合わせて細かくできるようになり、 Nuxt.jsはフレームワーク補完ライブラリとして成熟してきた と言える。 3. Nuxt.jsを使う上で大事だと思うこと

Nuxt.jsの成熟化 ベストプラクティスの集合に加え、各種設定も各プロジェクトに合わせて細かくできるようになり、 Nuxt.jsはフレームワーク補完ライブラリとして成熟してきた と言える。 高機能なアプリケーションを簡単に構築できる Vue CLI 3.0の登場によって旨味は大分減った ものの、 SSRを手軽に実装できる のはやはり大きなメリット。 3. Nuxt.jsを使う上で大事だと思うこと

Nuxt.jsの成熟化 ベストプラクティスの集合に加え、各種設定も各プロジェクトに合わせて細かくできるようになり、 Nuxt.jsはフレームワーク補完ライブラリとして成熟してきた と言える。 高機能なアプリケーションを簡単に構築できる Vue CLI 3.0の登場によって旨味は大分減った ものの、 SSRを手軽に実装できる のはやはり大きなメリット。 いわば、工法を熟知していなくても それなりに立派な家を作ることができる。 3. Nuxt.jsを使う上で大事だと思うこと

Nuxt.jsの困難さ 仕組みが分からないということは、何か起こった際に、問題を特定・解決することが 困難になるということ。 3. Nuxt.jsを使う上で大事だと思うこと

Nuxt.jsでアプリケーションを開発するにあたって node_modules配下のnuxtパッケージにダイブし、 ベストプラクティスがどういった仕組みで実現され ているのか、どういった初期値が設定されているのか といったことを、気にしながら開発を進めること で、よりそのメリットを享受できる。 3. Nuxt.jsを使う上で大事だと思うこと