创新项目实训——Vue项目部署优化之Gzip压缩

Gzip压缩的概念及用途

Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台。当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小。这取决于文件中的内容。

利用Apache中的Gzip模块，我们可以使用Gzip压缩算法来对Apache服务器发布的网页内容进行压缩后再传输到客户端浏览器。这样经过压缩后实际上降低了网络传输的字节数，最明显的好处就是可以加快网页加载的速度。

在项目部署后，我们的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，甚至可能阻塞后面的进程。在这样的情况下，可以采用Gzip压缩的方式有效减小资源文件大小。

在智能创新引导工具项目中，采用了以下方法进行压缩：

打包时通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件。

工具引入

yarn add compression-webpack-plugin --save-dev

项目配置

vue.config.js文件中配置：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置
            }),
        ],
    },
};

这里对js、html、css文件进行了压缩处理，并没有进行图片压缩，因为图片压缩并不能实际减少文件大小，反而会导致打包后生成很多同大小的gz文件，得不偿失。

当然了，上文提到过，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件，所以还需要在服务器配置一个属性，以期望它能正常返回我们需要的gz文件。

Nginx配置

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip on;

    server {
        listen       443 ssl;
        server_name  www.mindfall.cn;
    }
}