李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

VitePress 支持 gzip 和 brotli 压缩 ​

增加 vite-plugin-compression 配置 ​

https://vitepress.dev/reference/site-config#vite

1. 安装 vite-plugin-compression ​

bash
npm i vite-plugin-compression -D

2. 在.vitepress/config.js 中增加如下配置 ​

Details
js
import { createWriteStream } from "fs";
import { defineConfig } from "vitepress"
import viteCompression from "vite-plugin-compression";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  vite: {
    plugins: [
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: "gzip",
        ext: ".gz",
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: "brotliCompress",
        ext: ".br",
      }),
    ],
  },
  ...
})

3. vite-plugin-compression 在 vitepress 只能打包 dist/assets/ 下面的代码 ​

alt text

对 html 代码进行.gzip 和.br 压缩 ​

1. 创建 comporess.js 文件 ​

bash
# windows: ni ./vitepress/comporess.js
touch ./vitepress/comporess.js

2. 安装 fast-glob ​

bash
npm i fast-glob -D

3. ./vitepress/comporess.js 文件内容如下 ​

Details
js
import { promises as fs } from "fs";
import { gzip, brotliCompress } from "zlib";
import { promisify } from "util";
import fg from "fast-glob";

const gzipAsync = promisify(gzip);
const brotliCompressAsync = promisify(brotliCompress);

async function compressFiles() {
  try {
    // 使用 fast-glob 直接获取所有 HTML 文件的路径
    const files = await fg("./dist/**/*.html", { onlyFiles: true });

    for (const file of files) {
      const content = await fs.readFile(file);
      // Gzip
      const gzipped = await gzipAsync(content);
      await fs.writeFile(`${file}.gz`, gzipped);
      // Brotli
      const brotlied = await brotliCompressAsync(content);
      await fs.writeFile(`${file}.br`, brotlied);
    }
    console.log("Compression complete.");
  } catch (error) {
    console.error("Error during compression:", error);
  }
}

compressFiles();

4. package.json 增加 compress 命令 ​

json
  "scripts": {
    "start": "npm run dev",
    "dev": "vitepress dev --host 0.0.0.0",
    "build": "vitepress build",
    "preview": "vitepress preview",
    "compress": "node ./.vitepress/comporess.js",
    "postbuild": "npm run compress",
    "deploy": "docker-compose build && docker-compose down && docker-compose up -d"
  },

5. 运行打包 ​

bash
npm run build

6. 生成的文件效果如下： ​

alt text