React中导入含多组件的数组常量是否会引入冗余组件影响性能？

只要你用普通静态import语法导入这个routes常量，不管你实际用不用数组里的component属性，routes.ts中引入的component1、component2都会被一并加载到当前模块的打包产物里。

原因说明 #

ES模块的依赖解析是构建阶段静态完成的，打包工具（Webpack、Vite、Rollup等）处理依赖时，只会判断模块是否被引用，不会根据你导入后使用了对象的哪些字段，自动剔除其他字段关联的依赖。

• JS对象本身是动态可变的，打包工具无法100%预判你不会在运行时访问数组项的component属性，因此不会做这种激进的Tree Shaking优化。
• 哪怕你在组件里只写const paths = routes.map(item => item.path)，完全没碰component字段，两个组件的代码依然会被打进当前chunk。

性能影响 #

如果这两个组件本身有一定体积，或者依赖了其他第三方库，确实会带来明显的性能问题：最直接的就是对应chunk的体积膨胀，用户需要下载、解析更多完全用不到的代码，拖慢页面加载速度。

优化方案 #

最稳妥的做法是把路径常量和路由配置拆分，从根源上避免无用依赖被引入：

1. 单独抽离纯路径常量文件，给所有只需要路由路径的组件导入：

// route-paths.ts
export const ROUTE_PATHS = {
  HOME: "/",
  TWO: "/two"
} as const

2. 真正的路由配置文件里再引入路径常量和页面组件，只供路由渲染逻辑使用：

// routes.tsx
import { ROUTE_PATHS } from "./route-paths";
import Component1 from "./Component1";
import Component2 from "./Component2";

export const routes = [
  { path: ROUTE_PATHS.HOME, component: Component1 },
  { path: ROUTE_PATHS.TWO, component: Component2 }
]

如果不想拆文件，也可以给路由组件加动态导入做懒加载，但注意这种方式依然会把动态导入的运行时代码打进引入routes的chunk，只是把组件本身拆成了异步加载的独立包，优化效果不如直接拆分常量彻底。

不要盲目依赖Tree Shaking处理这种场景：对象属性嵌套的依赖关系本身就很难被静态分析识别为“未使用”，为了摇掉几行代码加一堆特殊标记、调整打包严格模式的性价比极低。

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