vue项目开启gzip压缩

前言：为了优化首屏加载速度，启用gzip压缩。

---

一、安装compression-webpack-plugin

compression-webpack-plugin文档

//新版本不太兼容，推荐这个版本
npm install compression-webpack-plugin@6.1.1 --save-dev

二、修改vue.config.js文件

// 1.先引入
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 2.在configureWebpack下面进行配置（基本配置）
plugins: [
    new CompressionWebpackPlugin({
      // [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径，[query] 会被替换成查询字符串
      filename: '[path][base].gz',
      // 压缩成gzip
      algorithm: 'gzip',
      // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体做压缩
      test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, 
      // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
      threshold: 10240,
      // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      minRatio: 0.8
    })
  ]

// 3.然后 yarn build 进行打包得到dist文件夹，就可以看到生成了很多gzip后缀的文件

三、在nodejs中使用

由于我是用nodejs搭建的服务器，因此只记录用node使用的情况。

1.将dist文件放放在含有nodejs后台的文件夹下

2.修改server.js文件

const path = require('path');
const fs = require('fs');
//导入express模块
const express = require('express')
//创建express的服务器实例
const app = express()

app.use((request, response, next) => {
	//由于我是把server.js和dist文件夹放在同一路径下，因此需要拼接
    const fullPath = path.join(__dirname,'dist',`${request.originalUrl}.gz`);     
    // 检测是否存在同名.gz压缩文件
    if (fs.existsSync(fullPath)) {
        // 存在就告诉浏览器用gzip编码格式来解析，并把对应的“.gz”格式文件发送给浏览器。
        response.setHeader('Content-Encoding', 'gzip')  
        response.sendFile(fullPath);
    } else {
        next()
    }
   })

//将dist目录托管为静态资源服务器
app.use(express.static('./dist'))

//调用app.listen方法，指定端口号并启动web服务器
app.listen(3140,function(){
    console.log('Express server running at http://127.0.0.1:3140');
})

3.over

可以看到，导致首屏加载过慢的罪魁祸首已经压缩成功啦