背景

公司目前的项目是基于vue-cli的vue2项目，目前在进行优化迭代阶段。发现系统存在加载速度较慢的问题，特别是第一次进入（之后的加载使用缓存会速度会快一些），基于项目情况，整理了一些前端项目性能优化的手段。

性能优化手段

1. 开启gzip

gzip是GNUzip的缩写，是一种常见的文件压缩技术，最早用于Unix系统的文件压缩。gzip的压缩比在3-10倍左右，应用在前端项目打包中，可以减少加载资源所需的网络带宽，加快速度。

webpack配置开启gzip（vue-cli3+）

安装compression-webpack-plugin npm install compression-webpack-plugin
在vue.config.js中添加配置文件

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css'] // 定义压缩文件的类型

configureWebpack: {
  plugins: [
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\.('+ productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    })
  ]
}

nginx开启gzip

gzip on; # 开启gzip
gzip_comp_level 1; # 压缩级别 范围为1到9,值越大压缩程度越大，同时也会更消耗cpu性能
gzip_min_length 100; # 允许被压缩的页面最小字节数
# gzip_types 被压缩的MIME类型
gzip_types text/plain text/css application/xml application/javascript; 
gzip_vary on;

配置完成后重启nginx应用配置

验证gzip开启：

浏览器是否支持gzip
访问目标网站，打开浏览器开发者工具network选项，查看http请求中的请求头Request Header，查找其中的Accept-Encoding字段是否包含gzip，若包含，则浏览器支持gzip
gzip是否生效
若浏览器支持gzip，查看http请求中的响应头Response Header，查找其中的Content-Encoding字段是否为gzip，如果是，说明gzip生效

2.cdn加速

参考：

什么是gzip？blog.csdn.net/terrychinaz…

前端项目性能优化手段

背景