React+webpackのビルドを高速化

Osaka Mix Leap #4 - React でLTしました。https://yahoo-osaka.connpass.com/event/75065/

Transcript

1. React+webpackのビルドを高速化 Osaka Mix Leap (2018/01/11)平野昌士 / @shisama
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. この発表の対象者 webpack使ってる方 JSのビルドに時間がかかるとお悩みの方 開発スピードをもっとあげたい方
4. 仕事でReactを使ったSPAを開発して います
5. webpackを使ってビルドしています
6. webpackのビルド実行時間 1分もかかります
7. もっとビルド早くして開発スピードあ げたい
8. 主にwebpackでしていること 複数ファイルを一つにバンドル babelでES2015+やReactを変換 minify
9. 高速化前のwebpack.config module.exports = { // webpack.config.js 一部抜粋 plugins: [ new webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', }, ] }, };
10. ここからビルドの実行を高 速化していきます
11. 高速化に使ったもの cacheDirectory DllPlugin
12. cacheDirectory
13. cacheDirectory babel‒loaderのオプション機能 babelの結果をキャッシュする デフォルトではoffになっています
14. cacheDirectoryの使いかた webpack.config内のbabel‒loaderにクエリを追加する だけ
15. cacheDirectoryの使いかた module.exports = { // webpack.config.js 一部抜粋 plugins: [ new webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader?cacheDirectory', // cacheDirectory on }, ] }, };
16. ビルド実行時間 高速化前: 1分前後 cacheDirectory(初回): 1分前後 cacheDirectory(2回目以降): 40秒～50秒
17. DllPlugin
18. DllPlugin webpackのプラグイン 依存PKGだけバンドルしてファイル分割 　→reactとかreact‒domとかを別ファイルにまとめる 　→分割するので、元のバンドルファイルは軽くなる 　→分割したファイル両方をhtmlで読み込む 依存PKGに変更が無ければDLLバンドルファイルの更 新は不要
19. DllPluginの使い方 DLLバンドル用のwebpack.configを用意 これまでのwebpack.config側でDLLバンドルの情報を 読み込む 分割したファイルをhtmlで読み込む
20. DLLバンドル用のwebpack.config const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { // 依存PKG 配列 指定 vendor: ['react', 'react-dom' /* 依存PKG */], }, output: { path: 'path/to/dist', filename: '[name].dll.js', library: '[name]', }, plugins: [ // DllPlugin manifest.json 吐 new webpack.DllPlugin({ path: 'path/to/dll/[name]-manifest.json'), name: '[name]', }), new webpack.optimize.UglifyJsPlugin(), ], resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'], }, };
21. これまでのwebpack.config module.exports = { // webpack.config.js 一部抜粋 plugins: [ // Dll 使 new webpack.DllReferencePlugin({ context: __dirname, // DLL manifest.json 指定 manifest: require('path/to/dll/vendor-manifest.json'), }), new webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader?cacheDirectory', // cacheDirectory on }, ] } };
22. 分割したファイルをhtmlで読み込む <!-- DLL 先 読 込 --> <script src="./vendor.dll.js"></script> <!-- 元 --> <script src="./index.bundle.js"></script>
23. ビルド実行時間 高速化前: 1分前後 cacheDirectory(2回目以降): 40～50秒 cacheDirectory+DllPlugin: 20秒前後
24. その他高速手段 ・happypack 　・webpackのキャッシュ 　・今回は効果が出ませんでした ・webpack#externals 　・指定したPKGをバンドルに含めない 　・依存PKGはCDNから取ってくる場合おすすめ ・parcel 　・バズったやつ 　・Blazing fast。webpackよりかなりビルド早い 　・no config 　・webpackほど機能豊富ではない 　・ｍinifyが壊れていたりするらしい 　・現状では導入は厳しそう
25. 参考 ・ ・ ・ ・ ・ babel‒loader DllPlugin webpackのDLLバンドルを使ってビルドを速くする webpack時代の終わりとparcel時代のはじまり parcelでバンドルしてみた & そのとき出会ったハマりどころまと め
26. 宣伝
27. ご清聴ありがとうございました