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

Vue
Gerd AltmannによるPixabayからの画像

※この記事は2020年6月ごろにはてなブログの方に載せた記事をこちらに移動しました。

目的

vue.jsで簡単なwebアプリを作成して、ビルドをしようとしたらwarningが発生しました。
このwarningをvue.config.jsをいじって解決するのが今回の目的です。

vue.config.jsのconfigureWebpackを使用することでwebpackのオプションを使用することができるようです。

環境

  • 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オプションを使った解決方法を紹介します。

解決方法

① パフォーマンスヒントを出さない(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サイズのデフォルト値を変更するの二つを紹介しました。
より良い方法が見つかり次第この記事を更新または新たな記事で紹介しようと思います。
この記事を読んでいただきありがとうございます。

タイトルとURLをコピーしました