webpack優化系列-多程序打包thread-loader
阿新 • • 發佈:2020-12-04
專案變的龐大,檔案很多的情況下,採取多程序打包
- 如果小專案,檔案不多,無需開啟多程序打包,反而會變慢,因為開啟程序是需要花費時間的
多程序打包:
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 } } ] } ] }