痛点概述

🚨 线上报错，线下正常——这是很多前端在使用 Vite 打包后最常碰到的坑。

在发布后控制台提示 _export_sfc 在声明之前调用了导致页面直接崩溃。经过排查，根因是 暂存死区 引发的循环依赖。

为什么会出现 TDZ？

Vite 在建立时会对依赖进行分块。如果某些库之间存在循环依赖，某个模块可能在其依赖尚未完成初始化前就被执行，从而触发 TDZ 错误。

典型场景包括这方面，

• plugin-vue:export-helper 中的 _export_sfc 被提前调用。
• @vue/router/@vue/runtime-* 等内部函数存在执行顺序风险。
• consola 与其他库（如 geotiff) 的循环依赖。

定位风险依赖的思路

1. 观察报错栈：找出是哪一个 chunk 中的代码先于依赖执行。老实说，
2. 审查第三方库源码：搜索关键字 “TDZ” 或 “循环依赖”。
3. 利用 Vite 的插件 在 .vite/config.ts/.vite/config.js 中打印模块方法，确认哪些模块被错误地合并到同一 chunk。

从方法来看。手动分块规避 TDZ 风险

主要思路

通过 将高危依赖单独抽离成独立的 chunk，使其先于其它代码完成初始化。

Tuning 示例代码

if (
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes
) {
return 'lib-vue';}

完整 Vite 配置示例

export default : UserConfigExport => {
// ...其他配置
return {
// 基础配置
build这方面，{
再看target，'esnext',// 使用最新 ES 特性，仅兼容现代浏览器
再看minify，false,// 关闭压缩，便于排查问题
sourcemap: false。rollupOptions: {
output这方面，{
manualChunks: => {
// -------------------------------------------------
// 🎯 1️⃣ consola 与 geotiff 循环依赖
// -------------------------------------------------
if ) {
return 'lib-consola';}
// -------------------------------------------------
// 🎯 2️⃣ Vue 全家桶及 export-helper 的 TDZ 风险
// -------------------------------------------------
if (
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes ||
id.includes
) {
return 'lib-vue';
}
// -------------------------------------------------
// 🎯 3️⃣ 第三方库统一放入 vendor
// -------------------------------------------------
if ) {
return 'vendor';}
// -------------------------------------------------
// 🎯 4️⃣ 按视图目录拆分业务代码
// -------------------------------------------------
if ) {
const moduleInfo = getModuleInfo;if {
const folderName = id.split.split;说起来，const hasCrossViewImporters = .some(importerId => {
if ) {
const importerFolder = importerId.split.split;return importerFolder!按理说，== folderName;}
return false;})，if {
return;// 保持默认打包策略
}
}
return id.split.split;}
},entryFileNames: 'js/-.js',chunkFileNames: 'js/-.js'。assetFileNames: '/-.',},},},// ...其余插件、服务器等配置
};}，

实战要点回顾 ✅

• #1：先定位 TDz 报错来源 → 确认是哪块代码提前执行。
• #2：在 manualChunks 中把高危库单独抽出来 → 如上例的 lib‑vue、lib‑consola。
• #3：保持业务代码按文件夹拆分，可配合 getModuleInfo 做细粒度控制。老实说，
• #4：上线前打开压缩 & sourcemap 验证。确保不会因压缩导致新问题。