面试题：TypeScript模块的导入导出优化

优化模块导入导出以提升性能和可维护性

处理重复导入模块
- 使用统一入口文件：在实际项目中，对于频繁重复导入的模块，可以创建一个统一的入口文件。例如，假设项目中有许多模块都需要用到lodash的多个函数，像_.map、_.filter等。可以创建一个utils/lodashUtils.ts文件，在其中导入所需的lodash函数并重新导出：
```
// utils/lodashUtils.ts
import { map, filter } from 'lodash';
export { map, filter };
```
然后在其他模块中，只需要从这个统一入口导入：
```
// someModule.ts
import { map, filter } from './utils/lodashUtils';
```
这样既减少了重复导入，又方便管理。如果后续lodash的使用有变化，只需修改lodashUtils.ts文件。
- 利用ES6模块的特性：ES6模块是单例的，即使在不同模块多次导入同一个模块，实际只会加载一次。例如：
```
// moduleA.ts
import { someFunction } from './commonModule';
// moduleB.ts
import { someFunction } from './commonModule';
```
虽然moduleA和moduleB都导入了commonModule，但在运行时，commonModule的代码只会被执行一次，其导出的内容会被共享。不过，从代码维护角度，减少重复导入代码结构会更清晰。
合理使用默认导出和命名导出
- 默认导出：
  - 适用场景：当一个模块主要导出一个“主”对象、函数或类时，适合使用默认导出。例如，在一个UserService.ts模块中，定义了一个UserService类来处理用户相关的业务逻辑，使用默认导出会很直观：
```
// UserService.ts
class UserService {
  // 类的方法和属性
  getUser() {
    // 获取用户逻辑
  }
}
export default UserService;
```
  在其他模块导入时，可以使用更简洁的语法：
```
// main.ts
import UserService from './UserService';
const userService = new UserService();
userService.getUser();
```
- 命名导出：
  - 适用场景：当一个模块需要导出多个相关的对象、函数或类时，命名导出更合适。比如在一个mathUtils.ts模块中，定义了多个数学计算函数：
```
// mathUtils.ts
export function add(a: number, b: number) {
  return a + b;
}
export function subtract(a: number, b: number) {
  return a - b;
}
```
  在其他模块导入时，可以按需导入所需的函数：
```
// calculate.ts
import { add, subtract } from './mathUtils';
const result1 = add(2, 3);
const result2 = subtract(5, 2);
```
- 混合使用：在一些情况下，也可以混合使用默认导出和命名导出。例如，一个模块既有主要的导出对象，又有一些辅助函数。假设uiComponent.ts模块主要导出一个UIComponent类，同时还有一些辅助的样式生成函数：
```
// uiComponent.ts
class UIComponent {
  // 组件相关逻辑
}
export default UIComponent;
export function generateStyle() {
  // 生成样式逻辑
}
```
  在其他模块导入时：
```
// app.ts
import UIComponent, { generateStyle } from './uiComponent';
const component = new UIComponent();
const style = generateStyle();
```
动态导入
- 适用场景：对于一些不常用或者在特定条件下才需要加载的模块，可以使用动态导入。例如，在一个大型应用中，有一个用户报告功能，只有当用户点击“报告问题”按钮时才需要加载相关的报告生成模块。在TypeScript中，可以这样实现：
```
async function handleReportClick() {
  const reportModule = await import('./reportModule');
  const report = new reportModule.Report();
  report.generate();
}
```
这样可以避免在应用启动时加载不必要的模块，提高初始加载性能。
Tree - shaking
- 确保模块结构支持：Tree - shaking是一种优化技术，它可以在打包时去除未使用的代码。为了让Tree - shaking生效，在项目中要尽量使用ES6模块的静态导入导出语法。例如，不要使用动态导入的方式在模块顶层导入模块（因为这样Webpack等打包工具无法分析哪些代码未被使用）。同时，对于一些第三方库，确保它们是以ES6模块形式发布的，这样在打包时可以更好地进行Tree - shaking。例如，lodash库就支持以ES6模块形式引入，这样在打包时可以只包含实际使用的函数代码，而不是整个lodash库。

星途面试题库

面试题：TypeScript模块的导入导出优化

知识考点

面试题答案

优化模块导入导出以提升性能和可维护性