webpack gzip加速页面访问速度

简单说一下对gzip的理解：

客户端访问资源时，服务端先对资源进行压缩，再返回
客户端自动解压，无需另行处理

第一点要注意的是，客户端每次访问资源时，服务端都会对资源进行压缩，每次压缩都会占用一定的系统资源（CPU、内存），因此，这里需要对压缩后的资源进行缓存处理。

因为前端使用了webpack打包工具，在构建过程中，使用compression-webpack-plugin插件即可对文件进行压缩，服务端直接使用压缩后的文件。

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

在webpack添加如下配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
//...
plugins:[
  new CompressionWebpackPlugin({ //这里对大于10k的js和css文件进行压缩，其它配置参考官方文档
      test: /\.(js|css)$/,
      threshold: 10240
  })
]
//...

修改配置文件后，构建一下npm run build
即可看到部分体积较大的js和css文件，会产生.gz格式的压缩文件。

随后还需要对部署前端代码的服务器进行配置，这里以nginx为例，打开nginx.conf文件，添加如下配置
需要注意的是，这里需要有两种不同的情况：

直接使用压缩后的文件

# 第一种情况

http {
    # ...其它配置
    # 开启gzip
    gzip on;
    gzip_static on;
    # ...其它配置
}

不使用webpack打包后的.gz文件，客户端访问资源时再压缩

# 第二种情况

http {
    # ...其它配置
    gzip  on;
    gzip_static on;
    gzip_min_length 10k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 8;
    # 根据需要添加文件类型
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
    # ...其它配置
}

启动服务器，按下F12打开开发者工具，打开network，在列表的表头右击鼠标，修改：responses Headers 下的Content-Encoding，访问页面即可看到列表中部分js和css文件Content-Encoding那一列下的值为gzip，在http response header中也可看到Accept-Encoding: gzip。

需要注意的是，若使用了代理服务器，在代理服务器中也要添加相关的gzip配置。但是，如果代理服务器使用了gzip，部署前端代码的nginx就不要使用gzip了，因为这样会导致二次压缩

转载http://www.luyixian.cn/news_show_272928.aspx

webpack gzip加速页面访问速度

猜你喜欢