Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+webpackのビルドを高速化

 React+webpackのビルドを高速化

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

January 11, 2018
Tweet

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ほど機能豊富ではない  ・minifyが壊れていたりするらしい  ・現状では導入は厳しそう
  25. 参考 ・ ・ ・ ・ ・ babel‒loader DllPlugin webpackのDLLバンドルを使ってビルドを速くする webpack時代の終わりとparcel時代のはじまり

    parcelでバンドルしてみた & そのとき出会ったハマりどころまと め
  26. 宣伝

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