Gzip性能优化方案

Posted on | 阅读数

前言

一个前端开发人员肯定知道线上环境要把 js、css、图片等压缩，提升页面加载速度，优化性能。

压缩方式

前端自己打包压缩的有 grunt，gulp，webpack,fis 等等，此处只介绍 webpack Gzip 压缩

1
npm i -D compression-webpack-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//vue.config.js
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  baseUrl: BASE_URL,
  chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        })
      );
    }
  }
};

fwoafhafwnefp

可见 Gzip 压缩可以节省很多时间

Nginx 配置

1
2
3
4
5
6
7
8
9
10
11
http {
    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;

}

效果预览

1
2
//本地代码打包
yarn build

配置本地的 Nginx

效果如下：

jtyfjtfyjty