Vite 开发正常、生产白屏：检查 Rollup Hook 顺序与产物语法

Vite 开发正常、生产白屏检查 Rollup Hook 顺序与产物语法Vite 开发正常、生产白屏说明两条处理链存在差异。保存真实 build 产物、Source Map 与目标浏览器错误再查语法目标、polyfill 和插件 Hook。为什么本地 dev 正常生产构建却白屏先保存出错版本的dist产物、Source Map 和目标浏览器错误再在本地执行同一 build。通过 Source Map 把堆栈位置映射回依赖或插件输出// 产物中的可疑调用形态具体变量和位置来自当前 Source Map var legacyModule resolvedLegacyGlobal.MyLegacyLib.call(void 0);Vite 的开发依赖预构建与正式 build 处理链不同具体工具还取决于 Vite 版本。CJS 依赖、目标浏览器与自定义 transform 可能在两条链上得到不同结果因此要以锁定版本后的构建日志和最小复现为准。自定义 Vite 插件的enforce会影响 Vite 插件钩子顺序但不等同于任意 Rollup 内部插件的处理顺序。需要通过最小复现和构建日志确认具体依赖的转换过程。CommonJS 兼容问题可能来自依赖包的导出格式、混合模块或浏览器目标。应升级或替换不兼容依赖并在生产构建上测试而不是依赖某个正则或假定的插件排列修复。修复方案缩小自定义转换并增加产物回归先确认不兼容依赖及其导出方式优先升级、替换或使用官方兼容配置。产物扫描只能发现已知模式最终仍要在支持的浏览器矩阵上运行回归。下面的配置展示校验位置使用前要按插件版本和浏览器目标复跑。import { defineConfig, type Plugin } from vite; import vue from vitejs/plugin-vue; import legacy from vitejs/plugin-legacy; import { supportedBrowsers } from ./build-targets; /** * 构建后输出可疑模式供结合 source map 和目标浏览器测试排查。 */ function commonjsSyntaxCheckerPlugin(): Plugin { return { name: rollup-plugin-commonjs-checker, apply: build, // 强制在所有打包 Hook 结束后执行 enforce: post, generateBundle(_, bundle) { const undefinedCallPattern /void 0\)\.call\(/; for (const [fileName, chunk] of Object.entries(bundle)) { if (chunk.type chunk) { // 检查产物中是否存在错乱的 CommonJS 痕迹 if (undefinedCallPattern.test(chunk.code)) { throw new Error( \n❌ [Rollup Bundle Checker Error] 生产构建阻断\n 产物文件 ${fileName} 包含需要人工检查的 (void 0).call() 模式。\n 请结合 source map、依赖版本和目标浏览器复现结果判断原因。\n ); } } } console.log([Rollup Bundle Checker] 已完成已知可疑模式扫描); }, }; } export default defineConfig({ plugins: [ // 1. 核心 Vue 插件最先执行 vue(), // 2. 官方 Legacy 插件支持矩阵从项目 Browserslist 配置读取 legacy({ targets: supportedBrowsers, modernPolyfills: true, }), // 3. 已知模式扫描不能替代浏览器回归 commonjsSyntaxCheckerPlugin(), ], // 强制预构建某些可能隐藏 CJS 问题的依赖包 optimizeDeps: { include: [my-legacy-lib], }, build: { // 生产构建时显式配置 Rollup 的 CJS 插件选项 commonjsOptions: { include: [/node_modules/], transformMixedEsModules: true, // 允许混合 ESM 与 CJS 的第三方库 }, }, });发布前验证执行vite build vite preview并在项目实际支持的 Safari/iOS 版本上验证首屏、路由跳转与关键交互。若依赖含 CJS 或旧语法保留最小复现和锁定版本避免只靠正则扫描判定构建正确。这类白屏问题可以留下三条排查规则第一npm run dev通过不等于正式 build 通过。发布前运行vite build vite preview并在支持的浏览器上走关键路径。第二自定义转换插件应尽量少修改第三方依赖并通过构建产物和兼容性测试验证其影响。第三CI 可保留产物检查但应以浏览器自动化回归和错误监控作为主要防线。