面试题：TypeScript导入导出对模块加载性能的优化

Question

假设你有一个大型项目，其中存在许多TypeScript模块相互导入导出。为了提升模块加载性能，你会如何设计导入导出结构？从代码组织和webpack等打包工具配置方面阐述你的思路。

Answer 1

代码组织

1. 按功能模块拆分 将项目按功能划分成多个独立的模块，每个模块只包含与其功能紧密相关的代码。例如，在一个电商项目中，可以将用户模块、商品模块、订单模块等分开。这样在导入时可以精准导入所需模块，减少不必要的代码导入。

// user.module.ts
export const getUserInfo = () => {
    // 获取用户信息逻辑
};

// 在其他模块导入
import {getUserInfo} from './user.module';

2. 使用 barrel files（桶文件） 在每个功能模块目录下创建一个 index.ts 文件作为桶文件。在桶文件中统一导出该模块内需要对外暴露的内容，避免在不同地方重复导入内部子模块。

// user 目录下的 index.ts
export * from './userInfo';
export * from './userAuth';

// 外部导入
import {getUserInfo, login} from './user';

3. 减少不必要的默认导出 尽量使用命名导出，这样在导入时可以明确知道导入的内容，并且有利于代码的静态分析。默认导出在某些情况下可能导致难以追踪导入来源。

// 命名导出
export const add = (a: number, b: number) => a + b;

// 导入
import {add} from './mathUtils';

webpack 配置

1. 使用 Tree - Shaking 确保 webpack 配置开启了 Tree - Shaking。在 webpack 4+ 中，默认开启了 Tree - Shaking 对于 ES6 模块的优化。在 package.json 中设置 "sideEffects": false，表示所有代码都没有副作用，webpack 可以放心地摇树优化，移除未使用的代码。

{
    "name": "my - project",
    "sideEffects": false,
    "version": "1.0.0",
    "main": "index.js"
}

2. Code Splitting（代码分割） 使用 splitChunks 插件进行代码分割。可以将公共模块提取出来，避免重复打包。例如，将第三方库如 lodash 提取到单独的 chunk 中。

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

3. 动态导入 在适当的地方使用动态导入（import()）。例如，在路由懒加载场景中，只有当路由被访问时才加载对应的模块。

const routes = [
    {
        path: '/home',
        component: () => import('./Home.vue')
    },
    {
        path: '/about',
        component: () => import('./About.vue')
    }
];

这样可以将大的 JavaScript 文件拆分成多个小的 chunk，在需要时异步加载，提升页面加载性能。