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'
    }
  }
}