autodll-webpack-plugin を使って簡単 DLL で超速ビルドをする

webpack のビルド、遅くて困っていますよね。
公式では webpack.DllPlugin というのを用意しており、これを利用することで依存モジュールを DLL として切り出して余計なビルドをしなくて済むように = ビルドを速くするというのが推奨されています。
DLL 自体は便利なのですが、実際利用しようとすると DLL 用の webpack コンフィグを用意したり、DLL の生成ビルドをしなきゃいけなかったりと意外と面倒です。

もっと簡単に DLL 出来ないかなーと思い、探したらありました。
autodll-webpack-plugin
OSS エコシステム最高ですね。

使い方は簡単で、webpack の plugin に DLL として外出しにしたいモジュールを webpack entry 形式で書くだけ。

    new HtmlWebpackPlugin({
      inject: true,
      template: "src/index.html",
      minify: {
        collapseWhitespace: true
      }
    }),
    new AutoDllWebpackPlugin({
      inject: true,
      filename: '[name]_[hash].js',
      entry: {
        'react': ['react'],
        'react_dom': ['react-dom'],
        'react_router_dom': ['react-router-dom'],
        'semantic_ui_react': ['semantic-ui-react'],
        'formik': ['formik'],
        'lodash': ['lodash']
      }
    }),

readme によると HtmlWebpackPlugin と合わせて使うことで、勝手に DLL をインジェクトできるよと言っているのでそのようにしている。
これだけで DLL 化と挿入が出来てしまう。

複雑化しやすい webpack の設定を DLL で更に複雑にしたくないので大変に便利。

一応計測したものも貼っておく。

	素のフルビルド	素の差分ビルド	autodll フルビルド	autodll 差分ビルド	autodll + hardsource フルビルド	autodll + hardsource 差分ビルド
	17754ms	7718ms	17240ms	7003ms	2046ms	3832ms
	16865ms	6969ms	12416ms	4211ms	2346ms	2467ms
	16720ms	6090ms	13890ms	2796ms	2285ms	2559ms
	16953ms	9348ms	14658ms	3187ms	2105ms	1552ms
	16228ms	4459ms	16705ms	5894ms	2931ms	3492ms
	19296ms	5976ms	14037ms	3563ms	3207ms	2035ms
	20395ms	4570ms	14076ms	6342ms	2908ms	2216ms
	17285ms	7007ms	14384ms	2457ms	3318ms	3303ms
	20177ms	4961ms	15612ms	4779ms	2088ms	2311ms
	17239ms	5493ms	13749ms	3387ms	2990ms	2546ms
平均	17891ms	6259ms	14677ms	4362ms	2622ms	2631ms

大体 2,3 秒の短縮になっている。
それよりも hardsource が強すぎる。
タイトル詐欺

hardsource は hard-source-webpack-plugin で、cache-loader の様にキャッシュするプラグイン。
詳しくは Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | ヌーラボ で