二、webpack优化之去除冗余代码（vue）

本文主要介绍webpack 打包时：去除console.log、注释、并使用多进程并发运行以提高构建速度。

图1-1 未去除冗余代码
图1-2 去除冗余代码

由上图可知，去除冗余代码（图1-2）打包后的体积明显比 未去除冗余代码（图1-1）打包后的体积小。

vue.config.js配置

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

module.exports = {
  configureWebpack: {
    optimization: {
      // production环境生效 - 官方文档https://webpack.docschina.org/plugins/terser-webpack-plugin/
      minimizer: [
        new TerserPlugin({
          // 使用多进程并发运行以提高构建速度（webpack是单线程，开启多线程压缩速度更快）
          parallel: 4,
          // 是否将注释剥离到单独的文件中（默认为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
            }
          }
        })
      ]
    }
  }
}

相关文章

一、webpack优化之Gzip（vue）
三、webpack优化之第三方库使用 CDN 加载(vue)