vuecli開啟js代碼壓縮 以及代碼分割

配置代碼

chainWebpack: config => {
      config.optimization.minimize(true)// 開啟壓縮js代碼
      config.optimization.splitChunks({ // 開啟代碼分割
        chunks: 'all'
      })
  },

啟用gzip壓縮(需要配置nginx,可以看出壓縮后的文件大小明顯變化)

const CompressionWebpackPlugin = require('compression-webpack-plugin')
chainWebpack(config) {
  // 生產模式下啟用gzip壓縮 需要配置nginx支持gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|css)$'),
          // 只處理大於xx字節 的文件，默認：0
          threshold: 10240,
          // 示例：一個1024b大小的文件，壓縮后大小為768b，minRatio : 0.75
          minRatio: 0.8, // 默認: 0.8
          // 是否刪除源文件，默認: false
          deleteOriginalAssets: false
        }
      ])
    }
}

nginx 配置nginx參考文檔

server {
        listen       80;
        server_name  localhost;
        gzip on;
		gzip_static on;    
		gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
		gzip_proxied  any;
		gzip_vary on;
		gzip_comp_level 6;
		gzip_buffers 16 8k;
}

參考文檔

nginx-window命令