webpack4 打包vue2项目特别慢----优化之路 （记录贴）

最近公司项目打包特别 慢，决定优化一下，记录帖，前端小白，边学习边摸索

切项目到较小体量时的代码，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

后来发现是代码里 有个错误的写法，导致打包的时候卡住比较长时间，改掉就好了