Vite 构建优化：首屏资源压缩与依赖精简实践
前端性能优化中，首屏加载时间（FCP）直接影响用户留存和转化率。虽然 Vite 在开发阶段提供秒级热更新，但生产构建时若不对代码体积进行优化，浏览器仍需下载数兆的 JavaScript 资源，导致加载缓慢。
本文将介绍如何在 Vite 的 Rollup 编译流程中，通过自定义插件实现静态资源的动态压缩与依赖精简。
一、首屏加载的常见瓶颈
复杂单页应用常遇到以下问题：
- 公共 Chunk 体积过大：引入三维渲染、图表库或富文本编辑器时，若未做代码分割，Rollup 会将这些库打包到
index.js，使入口文件超过 1MB。 - 解压耗时影响渲染：Gzip 虽减少传输体积，但浏览器解析大文件时仍会占用主线程，导致界面卡顿。
- 动态压缩增加服务器负担：多数 CDN 在运行时执行 Gzip 压缩，增加 CPU 负载。建议在构建阶段直接生成
.gz和.br静态文件。
二、构建时压缩流程设计
在 Vite 构建流程中加入压缩插件，可在打包完成后自动生成 Gzip 和 Brotli 格式的静态文件。流程如下：
- Vite 执行
vite build生成dist/目录。 - 插件扫描
dist/中的 JS、CSS、HTML 文件。 - 并行压缩生成
.gz和.br备份。 - Nginx 根据
Accept-Encoding头直接分发.br文件。
三、插件实现
以下插件在closeBundle钩子中调用 Node.jszlib进行多线程压缩：
const fs = require('fs'); const path = require('path'); const zlib = require('zlib'); const { promisify } = require('util'); const gzip = promisify(zlib.gzip); const brotli = promisify(zlib.brotliCompress); function staticCompressPlugin(options = {}) { const targets = options.targets || ['.js', '.css', '.html']; function walkDir(dir, callback) { fs.readdirSync(dir).forEach(f => { const dirPath = path.join(dir, f); if (fs.statSync(dirPath).isDirectory()) { walkDir(dirPath, callback); } else { callback(dirPath); } }); } return { name: 'vite-plugin-static-compress', async closeBundle() { const outDir = path.resolve(this.config.build.outDir || 'dist'); console.log(`[Compress Plugin] 开始压缩: ${outDir}`); const filesToCompress = []; walkDir(outDir, (filePath) => { const ext = path.extname(filePath); if (targets.includes(ext) && !filePath.endsWith('.gz') && !filePath.endsWith('.br')) { filesToCompress.push(filePath); } }); await Promise.all(filesToCompress.map(async (filePath) => { try { const content = fs.readFileSync(filePath); const gzipData = await gzip(content); fs.writeFileSync(`${filePath}.gz`, gzipData); const brotliData = await brotli(content, { params: { [zlib.constants.BROTLI_PARAM_MODE]: zlib.constants.BROTLI_MODE_TEXT, [zlib.constants.BROTLI_PARAM_QUALITY]: 11, } }); fs.writeFileSync(`${filePath}.br`, brotliData); console.log(`[Success] ${path.basename(filePath)} -> .gz / .br`); } catch (err) { console.error(`[Error] ${filePath}:`, err.message); } })); console.log('[Compress Plugin] 压缩完成！\n'); } }; } module.exports = staticCompressPlugin;四、注意事项
- 构建时间增加：Brotli 级别 11 压缩耗时较长，CI 流水线可能增加 30 秒至 1 分钟。建议在测试分支仅启用 Gzip 级别 1，正式发版再开启 Brotli 级别 11。
- 存储开销：每个文件会生成
.gz和.br两个备份，但服务器存储成本较低，属于合理的“空间换时间”。 - 低端设备解压压力：高压缩率 Brotli 文件在低端手机上解压可能消耗较多 CPU。建议对大 Chunk 进行代码分割，避免单文件过大。
五、总结
通过在 Vite 构建流程中加入静态压缩插件，可在发布前直接生成优化后的资源文件，减轻服务器实时压缩负担，提升 CDN 分发效率，最终改善用户首屏加载体验。
