Vue-cli 初体验（三）聊聊压缩gzip

什么是gzip

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。在gzip官网中我们还能看到这么一句话，指gzip是一个单文件/流的无损压缩，当然你也可以指定如何压缩。

gzip is a single-file/stream lossless data compression utility, where the resulting compressed file generally has the suffix .gz. gzip also refers to the associated compressed data format used by the utility.

gzip可以将文件体积压缩，减少占用资源和http请求的时间，这两点也是gzip压缩技术能出现在前端视野的重要原因。

浏览器如何解析`.gz`文件

只要浏览器支持Content-Encoding: gzip就可以，基本现代浏览器都支持

response.setHeader("Content-Encoding", "gzip");

如何生成`gz`文件

我们这里主要使用vue-cli 3.x来进行本文的功能验证，对应的webpack插件为compression-webpack-plugin，首先我们安装依赖:

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

然后我们根据CLI官方推荐新建一个vue.config.js使用webpackChain链式添加相关的plugin配置(相关配置文档):

'use strict'
// compressWebpackPlugin
const compressWebpackPlugin = require('compression-webpack-plugin')
const isPrd = process.env.NODE_ENV === 'production'

// webpack config
module.exports = {
    chainWebpack(config) {
       config.
        when(isPrd, config => {
          // gzip
          config
            .plugin('compress')
            .use(compressWebpackPlugin, [{
              // only for .css adn .js
              test: /\.(js|css)$/
            }])
         })
    }
}

配置好了后，我们npm run build生成dist目录，在控制台中可以清楚的看到两种打包文件体积大小的对比：我们打开本地目录查看一下打包的文件，可以看到css文件都生成了一个.gz副本，相应的js也一样，这里我们的压缩是生效的

接着我们使用CLI自带的serve命令进行本地预览（相关文档），如果你没有安装，你需要按照文档简单安装一下：

// permission
sudo npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

这里支持gzip浏览器会默认请求.gz文件，不支持的返回未压缩的对应的文件类型，然后打开浏览器network，对.gz文件请求进行验证，这里选取elementUi的chunk进行验证:

这里可以看到大小为gz文件，打开请求详情可以看到请求头

diveDylan / blog