Vue3 构建产物过大：先查副作用声明、导入方式和环境变量

Vue3 包体过大先打开构建分析图，别上来就改 Rollup 参数。组件库导入、重复依赖、副作用声明和路由拆分各有证据，逐项验证。

Vue3 官方在设计之初就提出了极致的“按需编译”与“编译期标志控制（Compile-time Flags）”。但如果打包配置文件没有收口，Tree-shaking 就会难以生效。

为什么你的 Vue3 项目 Tree-shaking 没生效

很多开发者以为只要项目升级到了 Vue3，打包工具（如 Rollup 或 Vite）就会自动把没用到的代码删掉。

这里有一个常见误解。Tree-shaking 能否精准工作的核心前提，是代码应具备“零副作用（No Side-effects）”以及在编译期具备“死代码可达性推导（Dead-code Elimination）”。

在 Vue3 项目中，导致 Tree-shaking 失效主要有三大硬伤：

第一，编译期特性标志应与项目实际用法一致。关闭__VUE_OPTIONS_API__前，需要确认源码、依赖与迁移代码均不再使用 Options API；收益应以构建分析结果验证。

第二，全局注册可能增加初始引入范围。是否能按需裁剪取决于组件库的导出与副作用声明，应查看构建产物而不是假定所有组件都会进入 bundle。

第三，所有以VITE_前缀暴露给客户端的变量都应被视为公开信息。数据库密码和服务端密钥不能写入前端环境变量。

要搞定大厂级上线收口，应在 Vite 配置文件中打出组合拳。

Vite 候选配置与敏感环境变量拦截插件

下面给出一份待按项目验证的 Vite 配置，以及用于检查环境变量暴露的 Rollup 插件。依赖是否可摇树、浏览器目标和变量白名单都需要根据仓库调整。

import { defineConfig, loadEnv, type Plugin } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; /** * 自研 Rollup 插件：打包时强行拦截敏感环境变量泄漏 */ function envSecurityGuardPlugin(forbiddenKeys: string[]): Plugin { return { name: 'rollup-plugin-env-security-guard', generateBundle(_, bundle) { for (const [fileName, chunk] of Object.entries(bundle)) { if (chunk.type === 'chunk') { const code = chunk.code; for (const key of forbiddenKeys) { if (code.includes(key)) { throw new Error( `\n❌ [ENV SECURITY ALERT] 生产环境打包被阻断！\n` + `在产物文件 "${fileName}" 中扫描到了敏感环境变量明文泄漏: "${key}"。\n` + `请务必检查配置，严禁将私密 Key 暴露在客户端构建代码中！\n` ); } } } } }, }; } export default defineConfig(({ mode }) => { // 加载环境变量 const env = loadEnv(mode, process.cwd(), ''); return { plugins: [ vue(), // 接入环境变量安全拦截插件 envSecurityGuardPlugin([ env.DATABASE_PASSWORD || 'MOCK_SECRET_PWD', env.PRIVATE_API_KEY || 'SECRET_KEY_123', ]), ], define: { // 仅当项目确认不使用 Options API 时才关闭。 __VUE_OPTIONS_API__: JSON.stringify(false), // 生产环境禁用 Vue DevTools 监控逻辑 __VUE_PROD_DEVTOOLS__: JSON.stringify(false), // 开启 Vue Hydration 详细错误提示开关（生产环境关闭） __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false), }, build: { target: 'es2015', outDir: 'dist', minify: 'esbuild', // 开启 CSS 代码拆分 cssCodeSplit: true, sourcemap: false, // 是否上传受控 sourcemap 取决于错误监控与发布策略。 rollupOptions: { output: { // 优化 Chunk 拆包策略，避免单个 JS 文件过大 manualChunks(id) { if (id.includes('node_modules')) { if (id.includes('vue') || id.includes('@vue') || id.includes('pinia')) { return 'vue-vendor'; // Vue 核心生态独立打包 } if (id.includes('element-plus') || id.includes('@element-plus')) { return 'ui-vendor'; // UI 组件库独立拆包 } return 'vendors'; // 其他第三方依赖 } }, // 规范产物输出文件名 chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/entry-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash].[ext]', }, }, // 打包超大 Bundle 警告阈值（降低至 400KB） chunkSizeWarningLimit: 400, }, resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, }; });

构建收口与验证

将构建产物的入口、异步 chunk、gzip/brotli 后体积写入 CI 基线；改动组件库导入或拆包策略后，结合真实设备上的加载瀑布图和 Web Vitals 对比结果。关闭 source map 不能替代密钥治理，源码本身也不应包含凭证。

总结三条收口生产配置时的注意事项：

第一，明确组件库的导入策略，并用产物分析确认其实际效果。

第二，source map 可以不公开部署，或仅上传到受控的错误监控服务；它不是保密边界。

第三，构建拦截应接入 CI 流程。把环境变量安全扫描插件作为 Git Commit 或 CI 构建的硬卡点，防止有同事不小心把测试环境的 API Key 提交打包上去。