如何通过重导出优化多组件导入的效率与代码可读性？

问题背景 #

项目中需要从@some-lib导入大量组件，但目前只能从dist子路径逐个导入，无法使用简洁的统一入口导入：

逐个导入的写法（性能友好但代码冗余）：

import {Header} from '@some-lib/.../.../dist/Header';
import {Footer} from '@some-lib/.../.../dist/Footer';
import {Column} from '@some-lib/.../.../dist/Column';
import {Button} from '@some-lib/.../.../dist/Button';
import {Radio} from '@some-lib/.../.../dist/Radio';

期望的统一导入写法（简洁但当前无法实现）：

import {Header, Footer, Column, Button, Radio} from '@some-lib';

为了兼顾性能优势和代码整洁度，考虑通过单独文件集中导入并重导出，实现业务组件中的单行导入：

// libImportExport.js
import {Header} from '@some-lib/.../.../dist/Header';
import {Footer} from '@some-lib/.../.../dist/Footer';
import {Column} from '@some-lib/.../.../dist/Column';
import {Button} from '@some-lib/.../.../dist/Button';
import {Radio} from '@some-lib/.../.../dist/Radio';

export {Header, Footer, Column, Button, Radio};

业务组件中使用：

// MyComponent.jsx
import {Header, Footer, Column, Button, Radio} from './libImportExport';

请问这种做法是否有意义？

解答 #

这种做法完全有意义，核心价值和注意事项如下：

1. 完全保留按需加载的性能优势 #

只要你的构建工具（如Webpack、Vite）支持树摇（Tree Shaking），这种重导出方式不会破坏按需加载特性：

• 当业务组件只用到部分组件时，构建工具会自动剔除未使用的组件代码
• 本质上和直接从dist子路径逐个导入的性能表现一致，重导出仅作为模块转发，不会引入冗余代码

2. 显著提升代码整洁度 #

• 避免在每个业务组件中重复编写大量分散的导入语句，统一维护libImportExport.js即可
• 业务组件中只需一行导入语句，代码结构更清晰，可读性更强

3. 降低后续维护成本 #

• 可在libImportExport.js中统一处理组件的二次封装、别名设置或全局配置
• 若后续库的dist路径变更，只需修改这一个文件，无需在所有业务组件中逐一调整

注意事项 #

• 确保构建工具的树摇功能正常启用：Webpack需设置mode: 'production'，Vite默认支持树摇
• 不要在libImportExport.js中引入未导出的组件或执行额外副作用代码，避免不必要的打包体积增加
• 若后续库支持了统一入口的按需导入，可直接替换为统一导入语句，无需修改业务组件的代码

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