vue-cli 开启js代码压缩和代码分割

在vue.config.js中配置

chainWebpack: config=>{
	config.optimization.minimize(true)// 开启压缩js代码(默认true)
	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;
}