Vue.jsのビルド時に発生したwarningをなんとか解決


目的

vue.jsで簡単なwebアプリを作成して、ビルドをしようとしたらwarningが発生しました。
このwarningをvue.config.jsをいじって解決するのが今回の目的です。
vue.config.jsのconfigureWebpackを使用することでwebpackのオプションを使用することができるようです。
cli.vuejs.org


環境

OS: Windows10 home
エディタ: Visual Studio Code
Vue.js: @vue/cli 4.2.3


発生したwarning

ターミナル上でnpm run buildコマンドを実行したところ以下の文が表示された

                                                                                        
 WARNING  Compiled with 3 warnings                                                        
                                                                                                       
 warning                                                                                               
                                                                                                       
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).                  
This can impact web performance.                                                                       
Assets:                                                                                                
  css/chunk-vendors.d5ce9231.css (265 KiB)                                                             
                                                                                                       
 warning                                                                                               
                                                                                                       
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (2
44 KiB). This can impact web performance.                                                              
Entrypoints:                                                                                           
  app (683 KiB)                                                                                        
      css/chunk-vendors.d5ce9231.css                                                                   
      js/chunk-vendors.c323d2a1.js                                                                     
      css/app.bc0a28a1.css                                                                             
      js/app.4bbeddcf.js                                                                               
                                                                                                       
                                                                                                       
 warning                                                                                               
                                                                                                       
webpack performance recommendations:                                                                   
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of y
our application.                                                                                       
For more info visit https://webpack.js.org/guides/code-splitting/                                      
                                                                                                       
  File                                   Size              Gzipped                                     
                                                                                                       
  dist\js\chunk-vendors.c323d2a1.js      197.81 KiB        69.09 KiB                                   
  dist\js\app.4bbeddcf.js                7.39 KiB          2.60 KiB                                    
  dist\css\chunk-vendors.d5ce9231.css    264.73 KiB        28.47 KiB                                   
  dist\css\app.bc0a28a1.css              212.67 KiB        26.33 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              

どうやら私が作成したプロジェクトのassetとentrypointのサイズがwebpackで設定されているassetとentrypointのデフォルト値を超えてしまっているみたい。
webpackの公式よりwebpackのperformanceオプションを使った解決方法を紹介します。
webpack.js.org


解決方法

① パフォーマンスヒントを出さない(warningを強制的に表示させない)


vue.config.js

module.exports = {
  ・・・
  configureWebpack: {
    performance: {
      hints: false,
    }
  }
}

上記の設定でnpm run buildを実行すると

                              
 DONE  Compiled successfully in 67624ms                                                
                                                                                                       
  File                                   Size              Gzipped                                     
                                                                                                       
  dist\js\chunk-vendors.c323d2a1.js      197.81 KiB        69.09 KiB                                   
  dist\js\app.b8796ab9.js                7.39 KiB          2.60 KiB                                    
  dist\css\chunk-vendors.d5ce9231.css    264.73 KiB        28.47 KiB                                   
  dist\css\app.bc0a28a1.css              212.67 KiB        26.33 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                
                                                                                                       

とりあえずはビルドできた。
しかし、公式よると
"We recommend something like this for development environments."
"We recommend using hints: "error" during production builds to help prevent deploying production bundles that are too large, impacting webpage performance."
とあり、開発環境か本番かによってhints: 'warning', またはhints: 'error'に設定したほうが良さそう。

② asset size, entrypoint sizeの設定を変更する


vue.config.js

module.exports = {
  ・・・
  configureWebpack: {
    performance: {
      maxAssetSize: 270000,
      maxEntrypointSize: 700000,
    }
  }
}

上記の設定でnpm run buildを実行すると

                                                                                              
 DONE  Compiled successfully in 118907ms                                                      
                                                                                              
  File                                   Size              Gzipped                            
                                                                                              
  dist\js\chunk-vendors.c323d2a1.js      197.81 KiB        69.09 KiB                          
  dist\js\app.be985abf.js                7.39 KiB          2.60 KiB                           
  dist\css\chunk-vendors.d5ce9231.css    264.73 KiB        28.47 KiB                          
  dist\css\app.bc0a28a1.css              212.67 KiB        26.33 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       
                                                                                              

自分の作成したプロジェクトのasset, entrypointより少し多めに設定したことでビルドすることができました。


まとめ

今回はvue.jsのビルド時に発生したasset, entrypointのサイズに関するwarningの解決方法をまとめました。
本来であればいかにasset, entrypointのサイズを抑えるかをまとめたほうがパフォーマンスを考えるうえでも重要なのかもしれませんがとりあえず今回はパフォーマンスヒントを出さない、asset, entrypointサイズのデフォルト値を変更するの二つを紹介しました。
より良い方法が見つかり次第この記事を更新または新たな記事で紹介しようと思います。
この記事を読んでいただきありがとうございます。