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

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

もっと簡単に DLL 出来ないかなーと思い、探したらありました。
[autodll-webpack-plugin](https://github.com/asfktz/autodll-webpack-plugin)
OSS エコシステム最高ですね。

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

```js
    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 化と挿入が出来てしまう。

<img width="547" alt="screenshot 2018-03-11 21.11.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/22102/a3589df9-9482-86c7-1ef5-f42ed0d98222.png">

複雑化しやすい 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`](https://github.com/mzgoddard/hard-source-webpack-plugin) で、cache-loader の様にキャッシュするプラグイン。
詳しくは [Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | ヌーラボ](https://nulab-inc.com/ja/blog/cacoo/webpack-build-performance/) で