Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

React+webpackのビルドを高速化

 React+webpackのビルドを高速化

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

Masashi Hirano

January 11, 2018
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. 高速化前のwebpack.config module.exports = { // webpack.config.js 一部抜粋 plugins: [ new

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

    webpack.optimize.UglifyJsPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader?cacheDirectory', // cacheDirectory on }, ] }, };
  3. 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'], }, };
  4. これまでの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 }, ] } };
  5. その他高速手段 ・happypack  ・webpackのキャッシュ  ・今回は効果が出ませんでした ・webpack#externals  ・指定したPKGをバンドルに含めない  ・依存PKGはCDNから取ってくる場合おすすめ ・parcel  ・バズったやつ  ・Blazing

    fast。webpackよりかなりビルド早い  ・no config  ・webpackほど機能豊富ではない  ・minifyが壊れていたりするらしい  ・現状では導入は厳しそう