解决vue-cli3打包后文件太大加载慢的问题

一、配置vue

1.安装compression-webpack-plugin插件

npm i -D compression-webpack-plugin@3.0.0

2.在vue.config.js中添加如下配置

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
module.exports = {
	configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    },
}

3.打包

npm run build

二、nginx开启gzip

1.配置nginx.conf

http {  
  #开启或关闭gzip on off
  gzip on; 
  #不使用gzip IE6
  gzip_disable "msie6";
  #是否开启gzip静态资源 
  gzip_static on; 
  #gzip压缩最小文件大小，超出进行压缩（自行调节）
  gzip_min_length 100k;
  #buffer 不用修改 
  gzip_buffers 4 16k; 
   #压缩级别:1-10，数字越大压缩的越好，时间也越长
  gzip_comp_level 3; 
   #  压缩文件类型
  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary off;  
}

2.重启nginx

systemctl restart nginx