vue 3.0 + vite项目gzip打包优化_compresslist.includes('gzip')

最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化

手摸手开始优化

• • • 什么是gzip
    • 为什么要去优化
    • 如何优化
    • • • 1. 前端代码配置
    • 代码压缩
    • 服务器配置
    • • • • ``Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.``

什么是gzip

Gzip 是在 Unix 和类 Unix 系统上使用的一种文件格式和软件应用程序，用于在 HTTP 内容提供给客户端之前对其进行压缩。众所周知，该过程最多可将文件缩小 80%，从而 缩短页面加载时间、减少带宽消耗并减少 SSL 开销（由于SSL 握手期间的往返次数减少 ）。

与 gzip 相关的文件类型包括：

.gz – 表示由 gzip 算法压缩的文件扩展名。
.tar 文件，tarball – 一种用于存储多个文件以供存档但不用于压缩的格式。Gzip 可用于压缩 .tar 文件。
.tgz、.tar.gz、.gz 文件 – 表示已被 gzip 压缩的 .tar 文件。

为什么要去优化

虽然在 gzip 文件之前进行缩小似乎是多余的，但事实证明它可以将 tarfile 大小额外缩小 5-10%。由于 CDN 执行缩小和 gzip 压缩，因此它们最大限度地减少了交付给用户的代码文件的大小，从而显着减少了页面加载时间。

如何优化

1. 前端代码配置

这里我参考了 vite 社区的 vue-vben-admin 项目里 vite-plugin-compression 插件。感兴趣的朋友可以去支持一下，这里我就只展示简单的一段配置代码

import compressPlugin from "vite-plugin-compression";

export function configCompressPlugin(
  compress: "gzip" | "brotli" | "none",
  deleteOriginFile = false
): Plugin | Plugin[] {
  const compressList = compress.split(",");

  const plugins: Plugin[] = [];

  if (compressList.includes("gzip")) {
    plugins.push(
      compressPlugin({
        ext: ".gz",
        deleteOriginFile
      })
    );
  }
  if (compressList.includes("brotli")) {
    plugins.push(
      compressPlugin({
        ext: ".br",
        algorithm: "brotliCompress",
        deleteOriginFile
      })
    );
  }
  return plugins;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注: 这是属于 vite 的配置项内容，具体 vite.plugin 用法请参考官方文档

代码压缩

执行 npm run build

在未压缩之前有500k左右，通过 gzip 压缩之后体积减少了一倍

服务器配置

在配置完Vue部分后直接部署到nginx上是不会生效的，还必须打开nginx的gzip功能才可以。这里以nginx-1.20.1为例，首先需要确认当前nginx是否拥有

gzip模块，一般情况下都会默认安装对应。运行命令 nginx -V
查看返回结果中是否有 gzip 的相关模块 ngx_http_gzip_static_module 的详情可以去 ngxin官网查询一下

如果没有，运行 ./configure --with-所需要安装的模块名 命令

命令运行成功后执行make命令，千万不要执行make install！执行make install会直接将之前安装的nginx给覆盖掉。
make命令执行成功之后会在objs目录下生成nginx可执行文件，直接使用此nginx替换掉原本的nginx即可。在确认模块安装完毕之后，修改conf/nginx.conf文件，加入如下内容

#开启gzip功能
gzip on; 
#开启gzip静态压缩功能
gzip_static on; 
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10 
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后重启 nginx 服务器，正常情况的话就能打开了

在配置过程中遇到的nginx异常的情况

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

原因是由于上面 nginx 配置没有读取到，检查一下是否在 http 里配置正确