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 提交打包上去。