React+webpackのビルドを高速化 Osaka Mix Leap (2018/01/11)平野昌士 / @shisama

{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }

この発表の対象者 webpack使ってる方 JSのビルドに時間がかかるとお悩みの方 開発スピードをもっとあげたい方

仕事でReactを使ったSPAを開発して います

webpackを使ってビルドしています

webpackのビルド実行時間 1分もかかります

もっとビルド早くして開発スピードあ げたい

主にwebpackでしていること 複数ファイルを一つにバンドル babelでES2015+やReactを変換 minify

高速化前のwebpack.config module.exports = { // webpack.config.js 一部抜粋 plugins: [ new webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', }, ] }, };

ここからビルドの実行を高 速化していきます

高速化に使ったもの cacheDirectory DllPlugin

cacheDirectory

cacheDirectory babel‒loaderのオプション機能 babelの結果をキャッシュする デフォルトではoffになっています

cacheDirectoryの使いかた webpack.config内のbabel‒loaderにクエリを追加する だけ

cacheDirectoryの使いかた module.exports = { // webpack.config.js 一部抜粋 plugins: [ new webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader?cacheDirectory', // cacheDirectory on }, ] }, };

ビルド実行時間 高速化前: 1分前後 cacheDirectory(初回): 1分前後 cacheDirectory(2回目以降): 40秒～50秒

DllPlugin

DllPlugin webpackのプラグイン 依存PKGだけバンドルしてファイル分割 　→reactとかreact‒domとかを別ファイルにまとめる 　→分割するので、元のバンドルファイルは軽くなる 　→分割したファイル両方をhtmlで読み込む 依存PKGに変更が無ければDLLバンドルファイルの更 新は不要

DllPluginの使い方 DLLバンドル用のwebpack.configを用意 これまでのwebpack.config側でDLLバンドルの情報を 読み込む 分割したファイルをhtmlで読み込む

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'], }, };

これまでの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 }, ] } };

分割したファイルをhtmlで読み込む

ビルド実行時間 高速化前: 1分前後 cacheDirectory(2回目以降): 40～50秒 cacheDirectory+DllPlugin: 20秒前後

その他高速手段 ・happypack 　・webpackのキャッシュ 　・今回は効果が出ませんでした ・webpack#externals 　・指定したPKGをバンドルに含めない 　・依存PKGはCDNから取ってくる場合おすすめ ・parcel 　・バズったやつ 　・Blazing fast。webpackよりかなりビルド早い 　・no config 　・webpackほど機能豊富ではない 　・ｍinifyが壊れていたりするらしい 　・現状では導入は厳しそう

参考 ・ ・ ・ ・ ・ babel‒loader DllPlugin webpackのDLLバンドルを使ってビルドを速くする webpack時代の終わりとparcel時代のはじまり parcelでバンドルしてみた & そのとき出会ったハマりどころまと め

宣伝

ご清聴ありがとうございました