1. 去掉 console 列印及 debug 資訊，加快執行速度

修改 /build/webpack.prod.conf.js 檔案配置如下：

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          // 以下兩行配置，關閉 debug 和 console
          drop_debugger: true,
          drop_console:
 
 true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
})

2. 禁止生成 map 檔案，保護原始碼，同時減小打包體積

修改 /config/index.js 檔案配置如下：

module.exports = {
  build: {
    /**
     * Source Maps
     */
    productionSourceMap: false, // 把該項的配置修改為 false，關閉 source map
    // https://webpack.js.org/configuration/devtool/#production
 

    devtool: '#source-map'
  }
}

3. 開啟 GZIP 壓縮，進一步壓縮 js 和 css 檔案的體積

修改 /config/index.js 檔案配置如下：

module.exports = {
  build: {
    // 預設情況下 Gzip 關閉，因為許多流行的靜態主機，如 Surge 或 Netlify 已經為您 gzip 所有靜態資源。
    // 將其配置為 true 之前，確保執行以下程式碼安裝 compression-webpack-plugin 外掛（預設是安裝的最新版本）：
    // npm install --save-dev compression-webpack-plugin
 

    productionGzip: true, // 開啟 gzip 功能
    productionGzipExtensions: ['js', 'css']
  }
}

修改 /build/webpack.prod.conf.js 檔案配置如下：

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // asset: '[path].gz[query]', // 原配置報錯：ValidationError: Compression Plugin Invalid Options
      filename: '[path].gz[query]', // 將asset 修改為 filename 後又報錯：TypeError: Cannot read property 'emit' of undefined，執行以下操作：npm install --save-dev [email protected]
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

修改伺服器的配置，以 Nginx 為例，找到 conf 目錄下的 nginx.conf，開啟 gzip，並設定 gzip 的型別，如下：

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;