最近公司项目打包特别 慢,决定优化一下,记录帖,前端小白,边学习边摸索
切项目到较小体量时的代码,npm run build 打包324480ms
1、修改配置如下:
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
safari10: true
},
compress:{
unused: false//删除未引用的函数和变量,禁用
},
},
sourceMap: config.build.productionSourceMap,
cache: true,
parallel: true
})
]
打包:142271ms 速度提升55%
注:UglifyJsPlugin 在处理已经压缩过的文件时,在去除 unused variables 的环节性能会很差,处理时间是正常情况下的几十倍。
疑问:设置了 unused: false, 那么webpack的treeshake是不是也没法达到最终效果了?
切到最新代码后使用上面配置,打包869156ms(第一次打包 没有缓存)14.4分钟
继续使用上面配置,打包792240ms(第二次打包 有缓存)13.2分钟
不使用上面配置,打包893565ms(第一次打包 没有缓存)14.8分钟
继续不使用上面配置,打包731260ms(第二次打包 有缓存)12.2分钟
几乎无区别,继续研究。。。。
修改配置如下:
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: [
resolve('node_modules')
]
}
继续打包825289ms(有缓存)
无变化。。。这。。。。怎么办???试试happypack???
3、修改配置如下:
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})
module: {
rules: [
{
test: /\.js$/,
// loader: 'babel-loader?cacheDirectory',
exclude: [
resolve('node_modules')
],
use: [
{
loader: 'happypack/loader?id=happyBabel'
}
]
}
]
},
plugins:[
new HappyPack({
id: 'happyBabel',
loaders:['babel-loader?cacheDirectory'],
threadPool: happyThreadPool,
verbose: true
})
]
打包,854518ms
后来发现是代码里 有个错误的写法,导致打包的时候卡住比较长时间,改掉就好了