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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 高速化に使ったもの
    cacheDirectory
    DllPlugin
    

    View Slide

12. cacheDirectory
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. DllPlugin
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 宣伝
    

    View Slide

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

    View Slide