contentDllPluginを使ってWebpackのビルド時間を改善するJavaScriptwebpack概要Webpackのビルド時間を改善する手法としてDllPluginを使ってビルド対象を分割するというものがあります。そのやり方を説明します。DLLPluginとはDLLPluginはWebpack公式にも紹介されている方法でビルド対象を分割する事によって劇的にビルドのパフォーマンスを改善してくれます。https://webpack.js.org/plugins/dll-plugin/DLLとはダイナミックリンクライブラリの略で、要するに動的にライブラリにリンクしてくれるということなので、事前にライブラリを別のbundleとしてビルドしておいて、それに含まれるライブラリに依存するバンドルは後からライブラリのbundleにリンクするという形を取ります。これによりライブラリとライブラリを使う側のコードのビルドを分離できるので、都度ライブラリ側のコードをビルドしなくて良くなりビルドが速くなります。導入ライブラリ側のファイルのビルドと使う側のファイルを分けるので、webpackの設定は2つ書きます。同時にビルド用のnpmスクリプトも2つ用意します。ライブラリ側をvendorとし、ライブラリを使うアプリケーション側をappとします。ライブラリ側のビルド今回はライブラリを詰め合わせたビルドをvendorという名前で作っていきます。]};axiosを分離してビルドする設定を書きました。これを実行するとpublic/js/vendor-[hash].jspublic/js/vendor-manifest.jsonという2つのファイルが生成されます。public/js/vendor-[hash].jsはビルド結果が入り、public/js/vendor-manifest.jsonの方にはDLLPluginでのリンク用の設定が吐き出されます。"vendor-ee25a3.js"}ライブラリを使うコード側のビルドapp.jsにはaxiosを使うようなコードを予め書いておきます。...}これを実行するとapp-[hash].jsが生成されます。このようにしてDllReferencePluginを使うことでDllPluginで作ったvendor側のファイルを動的に読み込むことができます。script上2つのビルドはそれぞれ別々に実行できます。最初は依存関係があるのでvendor、appの順にビルドしてください。...}これによって日々の開発ではapp.js側しかビルドしなくて良いのでビルドが早くなります。HTML側での読み込み依存関係に合わせて順番に読むようにして下さい。src="js/app-[hash].js"></script>DllPluginを使ってみて実際のアプリケーションにDllPluginを導入したところビルド時間が約3分の2ほどに短くなったので、とてもおすすめです。DllPluginの対象はパスを指定するだけなので外部のライブラリだけでなく開発中のコードもクラス単位でビルドを分離可能なので、枯れていてほとんど変更がない部分についてはどんどんDllPluginの対象にしていくというのが有効だと思います。requestStockLike9Kazuhei@kazuhei八丁堀のスタートアップ企業で働いています。PHPとAWSが主なお仕事。Follow株式会社M&AクラウドM&Aクラウドは「テクノロジーの力で、M&Aに流通革命を」をミッションにM&Aプラットフォーム「M&Aクラウド」を開発運営するスタートアップです。upLoginユーザーは見つかりませんでした。