Webpackのコンパイル時のバンドルサイズを小さくする(Webpack4, Vue)

そこまで複雑でない画面(300行くらい)で数百kバイトとかいってしまったので対応した。
効果がある順に958kバイト → 132kバイト → 53kバイト → 27Kバイト → 7kバイト

BundleAnalyzerPluginを使用して可視化する

まず何がサイズが大きいのかを調べる。

https://www.npmjs.com/package/webpack-bundle-analyzer

npm i -D webpack-bundle-analyzer

webpack.config.js

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

webpack実行時に自動でブラウザ上に表示してくれる。

958kバイトのファイル(大したことはしていない)を例に対応していく。

vueなどのライブラリを外部化する

CDNとかで並列で読んだ方が速いとかライセンス表記とかの問題があるので基本ライブラリ系は全部外部化して別で読み込んだ方がいいかと。

webpack.config.js

module.exports = {
  externals: {
    "vue": "Vue",
    'element-ui': 'ElementUI'
  },
}

958kバイト → 132kバイト
結構減ったがまだまだ物足りない

webpackのdevtoolオプションでソースマップ方法を変更する（あるいは無効にする）

webpack.config.js

module.exports = {
 devtool: '#eval-source-map',
}

だとjsファイルに埋め込まれるような形で出力されるためやたらとファイルサイズが大きくなる。
気づくのに時間がかかった。

webpack.config.js

module.exports = {
 devtool: 'source-map',
}

xxxx.jsとxxxx.js.mapに分かれる。
本番環境にはmapファイルを上げないように注意する。

132kバイト → 53kバイト

vueコンポーネントからstyleタグを削除

結構効果が大きい
出来ればcss一本でやった方がいい(コンポーネント化するならhtmlに直接埋め込んでもいいような気がしないでもない)

<template>
  <div>
      <!-- iroiro -->
  </div>
</template>
 
<script lang="ts">
  // ...
<script/>
 
 
<style>
/* このスタイルをタグごと削除する */
<style/>

53kバイト → 27Kバイト

webpackのビルドオプションをdevelopmentからproductionに変更

以下はwebpack4の指定方法

開発用

$(npm bin)/webpack --mode development

本番用

$(npm bin)/webpack --mode production

27Kバイト → 7kバイト

参考

https://webpack.js.org/configuration/

他にも不要なローダーを削ったりとか出来ることはあるかもしれない。