Remix/Vite构建时Tabler Icons摇树优化失效致包体积过大

问题背景 #

• 基于Remix/Vite的项目A引入了自定义库B（Storybook/Vite构建），两者均将@tabler/icons-react安装为开发依赖
• 单独构建库B时，Tree-shaking正常，产物仅包含实际使用的Tabler Icons
• 构建项目A时，库B中的所有Tabler Icons被全量打包进build/client/assets/B.js，导致包体积增加约4MB

解决方案 #

1. 修正库B的依赖声明 #

@tabler/icons-react作为库B的运行时依赖（而非开发依赖），应声明为peerDependency，确保项目A统一管理该依赖，同时让Tree-shaking跨库生效：

修改库B的package.json：

{
  "peerDependencies": {
    "@tabler/icons-react": "^x.x.x", // 替换为实际使用的版本
    "react": "^18.x.x",
    "react-dom": "^18.x.x"
  },
  "devDependencies": {
    // 移除@tabler/icons-react
  }
}

2. 优化库B的Vite/Rollup配置，确保ES模块兼容性 #

库B的输出必须为标准ES模块，才能让项目A的Rollup正确进行Tree-shaking：

更新库B的vite.config.js中的build.rollupOptions：

export default defineConfig({
  build: {
    rollupOptions: {
      external: [
        ...Object.keys(packageJson.peerDependencies), // 确保peer依赖被标记为外部依赖
        'moment',
        'moment-timezone',
        '@fontsource/inter'
      ],
      output: {
        sourcemap: false,
        compact: false,
        exports: 'named', // 强制命名导出，适配Tabler Icons的导出方式
        preserveModules: true // 保留模块结构，提升Tree-shaking效率
      }
    }
  }
})

3. 确保项目A的Tree-shaking配置生效 #

Vite默认在生产环境开启Tree-shaking，但可明确配置强化：

更新项目A的vite.config.js：

export default defineConfig({
  build: {
    rollupOptions: {
      treeshake: {
        moduleSideEffects: 'no-external', // 排除外部依赖的副作用，优化Tree-shaking
        propertyReadSideEffects: false,
        tryCatchDeoptimization: false
      }
    }
  },
  // 其他原有配置...
})

4. 规范库B的图标导入方式 #

确保库B中仅导入实际使用的图标，避免全量导入：

// 正确方式
import { IconHome, IconUser } from '@tabler/icons-react';

// 错误方式（会导致全量打包）
import * as Icons from '@tabler/icons-react';
import IconHome from '@tabler/icons-react/dist/icons/icon-home'; // 不要直接导入dist文件

验证步骤 #

1. 重新构建库B：npm run build
2. 更新项目A中库B的依赖（若为本地开发，可使用npm link或直接更新本地路径依赖）
3. 构建项目A：npm run build
4. 打开visualizer生成的报告，确认@tabler/icons-react仅包含实际使用的图标

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