1. 程式人生 > 實用技巧 >webpack優化系列-多程序打包thread-loader

webpack優化系列-多程序打包thread-loader

專案變的龐大,檔案很多的情況下,採取多程序打包

  • 如果小專案,檔案不多,無需開啟多程序打包,反而會變慢,因為開啟程序是需要花費時間的

多程序打包:

1 安裝 thread-loader
npm i thread-loader -D

配置如下:

    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.[contenthash:10].js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                  /* 
                    開啟多程序打包。 
                    程序啟動大概為600ms,程序通訊也有開銷。
                    只有工作消耗時間比較長,才需要多程序打包
                  */
                  {
                    loader: 'thread-loader',
                    options: {
                      workers: 2 // 程序2個
                    }
                  },
                  {
                    loader: 'babel-loader',
                    options: {
                      presets: [
                        [
                          '@babel/preset-env',
                          {
                            useBuiltIns: 'usage',
                            corejs: { version: 3 },
                            targets: {
                              chrome: '60',
                              firefox: '50'
                            }
                          }
                        ]
                      ],
                      // 開啟babel快取
                      // 第二次構建時,會讀取之前的快取
                      cacheDirectory: true
                    }
                  }
                ]
              }
        ]
      }