vue打包开启gzip及nginx配置gzip

前端项目做好，生产环境部署到服务器时，有时由于某些文件过大导致首屏加载很慢，这种情况最简单有效的处理方法就是压缩css,js文件给浏览器加载就会快很多

vue生产环境压缩css,js

chainWebpack: (config) => {  
  //生产环境，开启js\css压缩  
  if (process.env.NODE_ENV === 'production') {  
    config.plugin('compressionPlugin').use(new CompressionPlugin({  
      test: /\.(js|css|less)$/, // 匹配文件名  
      threshold: 10240, // 对超过10k的数据压缩  
      deleteOriginalAssets: false // 不删除源文件  
    }))  
  }  
},

vue打包开启了css/js文件压缩，部署到服务器上还需要对服务器进行相关配置，使服务器返回相应的gz文件给浏览器

服务器配置

这里以nginx服务器为例

开启gzip_static

gzip_static on;
gzip_proxied expired no-cache no-store private auth;

设置响应头

还需要再server里设置响应头

 location /{
          proxy_set_header Accept-Encoding 'gzip';
}

查看配置是否生效

配置生效后服务器加载js/css文件的速度就会更快。
没配置gzip之前

配置gzip之后

在响应头中也会看到 Content-Encoding:gzip