Vue优化sourceMap与生产环境清除log

说道优化这个话题 总是有好多切入点，比如：

组件懒加载、路由懒加载、开启gzip、公共的第三方包上cdn、还有基础的雅虎35条军规一条条排查等等。

今天说点别的，直接上教程，

动手来搞~

1、安装 terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

2、vue.config.js 中引入

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//生产环境是不需要sourceMap的，如下配置可以去除
//问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间
//sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。
//map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
  productionSourceMap:false,//清除sourceMap（可以减小一半大小如：压缩包7M，使用后3M多）

  //   打包后禁止在控制台输出console.log
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          },
        }),
      )
    }
  },
}

npm install（按需执行，如果可以用就不需要再次安装）

以上是”@vue/cli-service”: “~5.0.0”,

一定要查看下版本，别忘了，

其它老项目”@vue/cli-service”: “~4.5.0”,可以根据需要换版本

安装

npm install -D terser-webpack-plugin@4.2.3

在webpack4 里边确实需要 配置这个 terser-webpack-plugin 插件，在 webpack5 中已经默认配置好了（具体可以去看文档），所以，期待脚手架配置 webpack5 上线。

学习是一件痛苦并快乐的事情。