能否在vue-i18n中摇树优化未使用的翻译消息？

以下是几种可行的实现思路，适配你基于define配置的功能集按需构建场景：

1. 模块拆分 + 按需导入（最基础可靠） #

将翻译消息按功能模块拆分，每个功能对应独立的ES模块翻译文件（优先用.js而非.json，提升摇树兼容性），在代码中仅导入当前启用功能对应的翻译模块：

// locales/auth.en.js
export const authTranslations = {
  login: 'Login',
  logout: 'Logout'
}

// 业务代码中仅导入启用功能的翻译
import { authTranslations } from './locales/auth.en.js'

配合Vite默认开启的ES模块摇树，未被导入的翻译模块会直接被剔除出最终bundle。如果使用i18n类库（如vue-i18n、react-i18next），需开启库的按需加载模式（比如vue-i18n的组合式API、react-i18next的命名空间按需导入）。

2. 结合define配置做条件编译 #

利用你已有的define构建变量，在翻译文件中加入静态条件判断，让Vite在构建阶段自动剔除未启用功能的翻译：

// locales/en.js
export default {
  // 仅当FEATURE_AUTH启用时保留该组翻译
  ...(process.env.FEATURE_AUTH ? {
    login: 'Login',
    logout: 'Logout'
  } : {}),
  // 仅当FEATURE_DASHBOARD启用时保留该组翻译
  ...(process.env.FEATURE_DASHBOARD ? {
    dashboard: 'Dashboard',
    overview: 'Overview'
  } : {})
}

Vite会在构建时将process.env.FEATURE_*替换为配置的布尔值，静态分析后自动移除未满足条件的翻译条目。

3. 自定义Vite插件精准过滤 #

如果需要更精细化的控制，可以编写简单的Vite插件，在编译阶段扫描代码中实际使用的翻译key，再从翻译文件中过滤出对应消息：

// vite-plugin-i18n-tree-shake.js
export default function i18nTreeShake() {
  return {
    name: 'i18n-tree-shake',
    async transform(code, id) {
      // 仅处理翻译文件
      if (!id.includes('locales/') || !id.endsWith('.json')) return code;
      
      // 扫描源码中所有被使用的翻译key（示例用正则，复杂场景可改用AST解析）
      const usedKeys = new Set();
      const sourceFiles = await this.resolve('src/**/*.vue', { resolveDir: process.cwd() });
      sourceFiles.forEach(file => {
        const content = fs.readFileSync(file, 'utf-8');
        const matches = content.match(/\$t\(['"](.*?)['"]\)/g);
        matches?.forEach(match => usedKeys.add(match.slice(3, -2)));
      });

      // 过滤翻译文件，仅保留已使用的key
      const originalMessages = JSON.parse(code);
      const filteredMessages = Object.fromEntries(
        Object.entries(originalMessages).filter(([key]) => usedKeys.has(key))
      );
      return `export default ${JSON.stringify(filteredMessages)}`;
    }
  }
}

在vite.config.js中注册该插件即可生效。

4. 使用原生支持摇树的i18n库 #

选择自带翻译摇树能力的库，比如lingui——它会通过Babel插件在编译阶段自动提取代码中使用的翻译key，生成仅包含已用消息的翻译文件，无需手动拆分或编写额外逻辑。

注意事项 #

• 避免运行时动态拼接翻译key（如$t('btn_' + type)），这种场景静态分析无法识别，摇树会失效；
• 用vite build --analyze生成bundle分析报告，验证翻译资源的摇树效果；
• 确保翻译文件使用ES模块格式，CommonJS模块的摇树支持有限。

内容的提问来源于stack exchange，提问作者Serge