nginx 开启gzip提高首屏加载速度

把前端的项目打包后放到服务器发现有一个文件4.2M，导致首次加载的速度很慢，开启gzip后变成1.2M
前端项目安装

npm install compression-webpack-plugin@5.0.1 --save-dev

vue.conf.js配置

config.plugin('compressionPlugin').use(
      new CompressionPlugin({
        test: /\.(js|css|less|map)$/, // 匹配文件名
        threshold: 1024, // 对超过10k的数据压缩
        minRatio: 0.8
      })
    )

babel.conf.js配置

const plugins = []

if (process.env.NODE_ENV === 'production') {
  plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }])
}

module.exports = {
  presets: ['@babel/preset-env', '@vue/app'],
  plugins
}

然后执行npm run bulid打包后生成.gz文件 修改nginx的配置

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
	
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
	

}

如果配置了https，把这个也放到https里面
重启nginx docker restart nginx
配置成功如图