在 vite 项目中集成压缩插件，核心做法是安装对应的 npm 包并在 vite.config.js 中通过 build.rollupoptions.plugins 数组引入。以常用的 @rollup/plugin-visualizer 或 rollup-plugin-visualizer 为例，配置后执行 npm run build 即可在构建产物中生成可视化报告或应用压缩逻辑。
如何配置 rollup-plugin-terser 进行 JS 压缩
使用 rollup-plugin-terser 可以显著减小 JavaScript 输出文件的大小。该插件基于 Terser 引擎，默认会对代码进行混淆和压缩。只需在 Vite 配置文件中导入并添加该插件到 Rollup 的插件列表中，Vite 就会在打包阶段自动处理。
// vite.config.js
import { defineConfig } from 'vite';
import terser from '@rollup/plugin-terser';
export default defineConfig({
plugins: [
// ...其他插件
terser()
],
build: {
minify: 'terser', // 显式指定使用 terser 作为压缩器
terserOptions: {
compress: {
drop_console: true, // 移除 console.log
drop_debugger: true // 移除 debugger
}
}
}
});
上述配置会在构建时启用 Terser 压缩，并移除控制台日志和调试语句。运行 npm run build 后，生成的 dist 目录下的 JS 文件体积会明显减小。
立即学习“Java免费学习笔记（深入）”；
如何配置 html-minifier-terser 压缩 HTML
Vite 默认不压缩 HTML 文件，但可以通过 html-minifier-terser 插件实现。该插件通常与 Vite 的 HTML 处理钩子结合使用，或者通过自定义插件方式介入构建流程。更简单的做法是使用 vite-plugin-html 等封装好的插件，它们内部集成了 HTML 压缩功能。
// vite.config.js
import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig({
plugins: [
createHtmlPlugin({
minify: true, // 开启 HTML 压缩
inject: {
data: {
title: 'My App'
}
}
})
]
});
通过 vite-plugin-html 的 minify: true 选项，Vite 会在构建时将 HTML 中的空白字符、注释和多余属性去除，从而优化首屏加载速度。
压缩后的产物结构是怎样的
经过压缩后，Vite 输出的 dist 目录结构保持不变，但文件内容发生变化。JavaScript 文件会被合并为单个入口文件（如 index-[hash].js），CSS 文件也会被提取并压缩。HTML 文件中的引用路径会自动更新为带哈希值的文件名，以确保缓存失效。
