面试题：TypeScript中ES6模块的高级应用与优化

1. 模块拆分与优化思路

Tree - shaking：
- 原理：Tree - shaking是一种通过消除未使用的代码来优化打包体积的技术。在TypeScript项目中，它基于ES6模块的静态结构分析，能确定哪些模块导出是真正被使用的。例如，如果一个模块有多个导出函数，但只有一个在其他地方被导入使用，Tree - shaking可以移除未使用的函数代码。
- 实现条件：项目需要使用支持Tree - shaking的打包工具，如Webpack。在Webpack配置中，设置mode为'production'，Webpack会自动启用相关优化，对ES6模块进行Tree - shaking。此外，代码应尽量采用ES6模块的标准导入导出语法（import和export），避免使用CommonJS等非静态分析友好的模块语法，因为Tree - shaking依赖于静态分析模块结构。
动态导入：
- 原理：动态导入允许在代码运行时才加载模块，而不是在编译时就全部加载。这有助于实现按需加载，对于大型项目中一些不常用的功能模块，可以在需要时再加载，从而提高初始加载性能。例如，一个大型应用中有用户设置页面，该页面的功能模块只有在用户点击进入设置页面时才需要，这时就可以使用动态导入。
- 语法：在TypeScript中，使用import()语法进行动态导入。它返回一个Promise，可以使用then或async/await来处理加载后的模块。例如：

async function loadFeature() {
    const module = await import('./featureModule');
    module.doSomething();
}

2. 实际项目中的优化策略

按功能模块拆分：
- 将项目按照不同的功能模块进行拆分，每个模块负责单一的功能。例如，在一个电商项目中，可以拆分为商品展示模块、购物车模块、用户登录模块等。这样每个模块相对独立，便于维护和理解，同时也有利于Tree - shaking优化。
- 每个模块有自己独立的目录结构，在模块目录中，将相关的代码、样式等文件组织在一起。例如：

src/
├── productModule/
│   ├── product.ts
│   ├── productStyles.css
│   ├── productTypes.ts
├── cartModule/
│   ├── cart.ts
│   ├── cartActions.ts
│   ├── cartReducer.ts

懒加载路由（结合动态导入）：
- 在前端项目中，如果使用路由，对于一些非首页加载的路由组件，可以采用懒加载的方式。例如，在使用React Router（可以在TypeScript项目中使用）时：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={
                    <React.Suspense fallback={<div>Loading...</div>}>
                        <Home />
                    </React.Suspense>
                } />
                <Route path="/about" element={
                    <React.Suspense fallback={<div>Loading...</div>}>
                        <About />
                    </React.Suspense>
                } />
            </Routes>
        </Router>
    );
}

export default App;

配置Webpack优化：
- 除了设置mode为'production'开启Tree - shaking外，还可以使用TerserPlugin进一步压缩代码。在Webpack配置文件（webpack.config.js）中：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    //...其他配置
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true // 移除console.log等日志，可进一步减小体积
                    }
                }
            })
        ]
    }
};

3. 代码示例 - Tree - shaking优化示例

假设我们有一个utils模块：

// utils.ts
export function add(a: number, b: number) {
    return a + b;
}

export function subtract(a: number, b: number) {
    return a - b;
}

export function multiply(a: number, b: number) {
    return a * b;
}

在另一个模块中只使用add函数：

// main.ts
import { add } from './utils';

const result = add(2, 3);
console.log(result);

当使用支持Tree - shaking的打包工具（如Webpack）进行打包时，subtract和multiply函数的代码不会被包含在最终的打包文件中，从而优化了代码体积。

4. 代码示例 - 动态导入优化示例

假设我们有一个analytics模块用于统计页面访问数据，只有在用户点击特定按钮时才需要加载：

// analytics.ts
export function trackPageView() {
    console.log('Page view tracked');
    // 实际项目中可能会发送数据到统计服务器
}

在主代码中：

// main.ts
const trackButton = document.getElementById('trackButton');
if (trackButton) {
    trackButton.addEventListener('click', async () => {
        const analytics = await import('./analytics');
        analytics.trackPageView();
    });
}

这样，analytics模块的代码在页面初始加载时不会被加载，只有当用户点击按钮时才会加载，提高了初始加载性能。

星途面试题库

面试题：TypeScript中ES6模块的高级应用与优化

知识考点

面试题答案

1. 模块拆分与优化思路

2. 实际项目中的优化策略

3. 代码示例 - Tree - shaking优化示例

4. 代码示例 - 动态导入优化示例