Tree Shaking 不直接处理多语言包，但可通过拆分为独立 ES 模块、静态 import 或显式动态 import（非模板字符串）、配合插件转译 JSON 为模块等方式，使未使用语言资源被剔除。
Tree Shaking 本身不直接处理多语言包（i18n）的按需删除，它只对 ES 模块中未被引用的导出（export）进行静态分析并剔除。但你可以通过合理的模块设计和构建配置，让多语言资源也进入 Tree Shaking 的作用范围，从而实现“按需保留、未用即删”。
把每种语言拆成独立的 ES 模块文件
避免把所有语言打包进一个大对象（如 const messages = { zh: {...}, en: {...}, ja: {...} }），因为整个对象会被视为一个导出项，即使只用了 zh，其他语言也会被保留。
✅ 正确做法：为每种语言单独建文件，按需导入：
-
locales/zh.js→export default { login: '登录', ... } -
locales/en.js→export default { login: 'Login', ... } - 业务代码中只导入当前需要的语言：
import messages from './locales/zh.js'
这样 Webpack 或 Vite 就能识别出 en.js 和 ja.js 未被任何地方 import，从而在生产构建中彻底剔除。
立即学习“Java免费学习笔记（深入）”；
用动态 import() + 环境变量控制语言入口
如果应用支持运行时切换语言，又希望不同语言包完全隔离，可结合构建时环境变量决定主语言，并用动态导入加载对应模块：
- 构建时指定：
npm run build -- --mode=zh - 入口文件中：
const lang = process.env.VUE_APP_LANG || 'zh';
let messages;
if (lang === 'zh') {
messages = await import('./locales/zh.js');
} else if (lang === 'en') {
messages = await import('./locales/en.js');
}
// 其他语言同理，未覆盖的分支不会生成对应 chunk
现代打包器（Vite/Webpack 5+）会对这些 import() 做 code splitting，并且只保留实际参与构建路径的语言模块，其余语言文件不会被打包进产物。
避免运行时拼接路径导致 Tree Shaking 失效
❌ 错误写法（无法静态分析）：
-
import(`./locales/${lang}.js`)——lang是变量，打包器无法确定具体加载哪个文件，会把整个locales/目录都打进 bundle
✅ 替代方案：
- 用
switch或if/else显式列出所有支持语言（如上例） - 或用预定义映射对象 + 可枚举 key（仍需确保只有明确路径被调用）
配合插件进一步清理未引用的语言资源
某些场景下语言资源是 JSON 文件或由工具生成（如 i18n Ally 导出），它们默认不是 JS 模块，Tree Shaking 不生效。此时可：
- 用
@intlify/vite-plugin-vue-i18n（Vite）或vue-i18n-loader（Webpack）将.json转为具名导出的 ES 模块 - 或编写简单插件，在构建时扫描源码中的
import语句，自动剔除未被引用的语言 JSON 文件
核心原则：只要语言资源最终以「具名/默认导出」形式暴露，并且导入路径是静态可分析的，就能被 Tree Shaking 触达。
