vue-cli 4.x 发布前的一些优化

1.terser-webpack-plugin 插件的配置

a、首先安装开发依赖terser-webpack-plugin

b、之后增加vue.config.js文件，并写入代码

 

// 打包去掉console
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  // 打包后默认使用相对路径，否则会出现首页空白的情况
  publicPath: './',
  // 关闭源代码映射，当为false时，打包后的文件在浏览器源码目录将不再显示webpack://相关的源码
  // 不设置此选项，相当于把代码给别人白嫖
  productionSourceMap: false,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      const optimization = {
        // 启用最小化压缩
        minimize: true,
        minimizer: [new TerserPlugin({
          // 和productionSourceMap一样
          // sourceMap: false,
          terserOptions: {
            compress: {
              // 移除所有console相关的代码，比如console.log,console.error
              drop_console: true,
              // 关闭自动断点功能，vue代码里插入debugger指令后，执行到对应位置会自动断线，此选项是移除debugger指令
              drop_debugger: true,
              // pure_funcs数组是用来配置移除指定的指令，比如console.log  alert等等
              // 移除console.log，需要配合.eslintrc.js文件里的如下设置，不然打包会出警告
              // rules: {
              //   'no-console':  'off',
              // }
              pure_funcs: ['console.log', 'console.error']
            }
          }
        })]
      }
      // 将optimization的所有属性合并到config里
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  }
}