本文主要介紹webpack 打包時(shí)：去除console.log、注釋、并使用多進(jìn)程并發(fā)運(yùn)行以提高構(gòu)建速度。

圖1-1 未去除冗余代碼

圖1-2 去除冗余代碼

由上圖可知，去除冗余代碼（圖1-2）打包后的體積明顯比 未去除冗余代碼（圖1-1）打包后的體積小。

vue.config.js配置

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      // production環(huán)境生效 - 官方文檔https://webpack.docschina.org/plugins/terser-webpack-plugin/
      minimizer: [
        new TerserPlugin({
          // 使用多進(jìn)程并發(fā)運(yùn)行以提高構(gòu)建速度（webpack是單線程，開啟多線程壓縮速度更快）
          parallel: 4,
          // 是否將注釋剝離到單獨(dú)的文件中（默認(rèn)為true）: 去除js打包后的LICENSE.txt文件(里面是注釋)
          extractComments: false,
          terserOptions: {
            // 去除打包的console.log
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
            },
            // 去除注釋
            output: {
              comments: false
            }
          }
        })
      ]
    }
  }
}

相關(guān)文章

一、webpack優(yōu)化之Gzip（vue）
三、webpack優(yōu)化之第三方庫使用 CDN 加載(vue)