如何用gzip进行前端性能优化

背景

SPA应用页面前端资源加载过慢，首屏Loading时间过长。

简介

HTTP 可以对传输的内容进行压缩，减少网络实际传输数据的大小。服务器对文件进行 gzip 压缩后，再进行传输，浏览器收到资源后再解压的过程。将js、text、json、css这种纯文本进行压缩，不用改变代码即可提升网站响应速度；

Webpack打包配置

 configureWebpack: () => {
    if (isNotDevEnv) {
      // 为非开发环境修改配置
      configuration["plugins"] = [
        new CompressionWebpackPlugin({
          filename: "[path].gzip[query]", // 提示compression-webpack-plugin@2.0.0的话filename改为asset
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240, // 内容超过10KB进行压缩
          minRatio: 0.8 // 只有压缩好这个比率的资产才能被处理
        })
      ];
      configuration["externals"] = {
        vue: "Vue",
        "vue-router": "VueRouter",
        vuex: "Vuex",
        axios: "axios",
      };
    } else {
      // 为开发环境修改配置
    }
    return configuration;
  }

Nginx配置

# 开启gzip，关闭用off
gzip on;


# 是否在http header中添加Vary: Accept-Encoding
gzip_vary on;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;

# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# 选择压缩的文件类型，其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

gzip开启/关闭对比

总结

优化首屏加载效率：

1. 减小加载资源的大小，通过减少文件体积来提高加载速度。
2. 对于第三方js库，可以进行分离打包或者CDN引入。（生产环境是内网的话，就把资源放内网，通过静态文件引入。如果是在外网可以进行CDN引入）
3. webpack相关配置优化。
4. 图片资源优化，例如雪碧图、iconfont、svg等等...
5. 前端代码优化。v-for的key使用、v-if/v-show的使用等等...
6. 优化交互，例如骨架屏、虚拟列表等
7. 服务端渲染。