VUE项目webpack打包使用compression-webpack-plugin压缩优化

背景

如何让前端页面加载的更加丝滑，是每个前端工程师都在追求的事情。

常见的优化策略

1. 异步

比如script标签支持的async属性，就是为了让浏览器加载的时候避免阻塞，从而加快页面的加载速度。

2. 减小前端打包后的文件体积

降低前端打包后的文件体积这个方向，衍生出很多方法，比如图片压缩，雪碧图，优化代码，webpack的tree-shaking等。今天说的是使用gzip来使得前端发布的文件更小！

原理

针对webpack打包好的文件，采用压缩算法进一步压缩。使得文件体积大大减小。

效果

压缩前23.2MB

压缩后3.88MB

 效果立竿见影！

具体操作

1. 安装compression-webpack-plugin

如果遇到“TypeError: Cannot read property 'tapPromise' of undefined”这样的错误，这是由于版本太高导致的，通过安装低版本即可解决

2. vue.config.js中配置

    ...
    const productionGzipExtensions = ['js', 'css']

    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串
        algorithm: 'gzip',//压缩成gzip
        //所有匹配该正则的资源都会被处理。默认值是全部资源。
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
        minRatio: 0.8,//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      })
    ],

 3. 服务端配置

生成的压缩文件是不能直接使用的，需要服务端给浏览器发送"Content-Encoding=gzip"，让浏览器通过gzip编码来解析资源

3.1 node实现

const path = require('path');
const fs = require('fs');
const express = require('express');
const app = express();

app.use((request, response, next) => {
    // 获取压缩文件
 const fullPath = path.join(__dirname, `${request.originalUrl}.gz`);     
 
 // 检测是否存在同名.gz压缩文件
 if (fs.existsSync(fullPath)) {
     // 如果存在压缩文件，则添加Content-Encoding=gzip属性，并把对应的文件发送给浏览器。
     response.setHeader('Content-Encoding', 'gzip')  
     response.sendFile(fullPath);
 } else {
     next()
 }
})
app.use(express.static('./'));

app.listen(8080, _ => {
 console.log('8080服务器已经启动');
});

 3.2 nginx

在http模块内配置“gzip_static on”即可。

以csdn加载为例