$30 off During Our Annual Pro Sale. View Details »

バンドルファイルの肥大化問題解消にみる_Nuxt.jsの成熟化.pdf

H
October 19, 2018
2.4k

 バンドルファイルの肥大化問題解消にみる_Nuxt.jsの成熟化.pdf

H

October 19, 2018
Tweet

Transcript

  1. 若松 良(Wakamatsu Hisashi) Front-end engineer 経歴 - 大学卒業後、映像制作に携わる - 2012年にCAに中途入社

    - フロントエンドエンジニアとして複数のサービスの立上げ、運用に携わる - 現在、コスメのクチコミサイト「 Lulucos by.S」の開発を担当 自己紹介
  2. Vue.js + Nuxt.jsを使ってB2Cサービスを作った話  - なぜNuxt.jsを採用したか  - 採用して良かった点  - 困難だった点  -

    採用してどうだったか 前回、話したこと https://speakerdeck.com/wakamatsu/vue-dot-js-plus-nuxt-dot-js-woshi-tuteb2csabisuwozuo-tutahua
  3. Nuxt2 major changes ・We now use Webpack 4. ・ESM is

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

    supported everywhere ・Upgraded to use Babel 7 ・ ・ ・
  5. 1. Nuxt v1のファイルサイズ問題 ・Write Vue Files ・Automatic Code Splitting ・Server-Side

    Rendering ・Bundling and minifying of your JS & CSS Nuxt.jsを使うメリット ・ ・ ・
  6. ・Write Vue Files ・Automatic Code Splitting ・Server-Side Rendering ・Bundling and

    minifying of your JS & CSS Nuxt.jsのボトルネック ・ ・ ・ 1. Nuxt v1のファイルサイズ問題
  7. 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のファイルサイズ問題
  8. └ コアライブラリ   ['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として切り出される。
  9. 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プロパティで指定されたリソース
  10. 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
  11. ビルド設定で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
  12. 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でどのように解消されたか
  13. 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でどのように解消されたか