記錄一次 webpack 打包優化之路

最近發現了 自己在 webpack 方面知識的薄弱，正好 手裏 有個 打包 兩分多 的 項目，就用這個項目練練手

由於 該項目的 webpack 版本 是基於 3.6.0 的

1、多進程 打包 壓縮

const HappyPack = require('happypack');

module: {
        rules: [
            ...
            {
                test: /\.js$/,
                loader: 'happypack/loader?id=babelid',
                exclude: /node_modules/
            }
            ...
        ]
 },
 plugins: [
       new HappyPack({
           //用id來標識 happypack處理那裏類文件
           id: 'babelid',
           //配置 babel-loader 
           loaders: [{
               loader: 'babel-loader',
           }],
           verbose: true,
       }),
       // 多進程 壓縮
       new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true
            }
          },
          parallel: true  // 並行壓縮
      }),
  ],

2、開啓緩存

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

new HappyPack({
  ...
   // 加上 cacheDirectory=true 
   loaders: ['babel-loader?cacheDirectory=true']
}),
new UglifyJsPlugin({
      ...
      cache: true,    // 開啓緩存
      ...
}),
new HardSourceWebpackPlugin()

效果就是這麼恐怖！我都沒想到啊沒想到

可以看到 緩存的文件 都被放在了 node_modules 裏面

3、事實上 方便了 我們的 alias 也能夠加速 打包（減少了 其 查找 的過程）

4、在 webpack4.0 

其實內置了 多進程打包，而且 happyPack 的作者 很遺憾的 不想 繼續維護 這個包了，所以 推薦以下配置

{
      test: /.js$/,
      use: [
          {
              loader: 'thread-loader',
              options: {
                   workers: 3
              }
           },
            // 'happypack/loader'
            'babel-loader?cacheDirectory=true',
       ]
},

 

// 多進程 的壓縮
new TerserPlugin({
   parallel: true,
   cache: true
}),