什么是代码分割（code splitting）和 tree shaking？

Question

IT Interview Practice · Accepted Answer

两者都能削减用户下载的 JavaScript。**代码分割**把 bundle 拆成按需加载的 chunk；**tree shaking** 移除你从不使用的代码。它们是互补的：分割*加载什么*，摇掉每个 chunk 内部的*死*代码。

## 代码分割

不是一个大 bundle，而是把 app 拆分，让每个路由或重型功能成为一个只在需要时才获取的独立 chunk：

```js
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk

// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetched on click
  openEditor();
};
```

动态 `import()` 就是那个信号——打包器会在那个边界处产出一个独立文件。

## Tree shaking

打包器静态分析 ES module 的 `import`/`export`，并丢弃没有任何东西引用的导出。它只对 **ESM**（静态、可分析）有效——而不是 CommonJS 的 `require`：

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

它依赖 `package.json` 中的 `"sideEffects": false` 和按函数导入；barrel 文件或有副作用的模块会破坏它。

## 权衡取舍

- 过度分割 → 产生许多细小的请求和瀑布流；把相关代码归组。
- Tree shaking 很脆弱——一个被错误标记的副作用会让死代码残留下来。

## 为什么这很重要

这是「发送更少 JS」背后的两个杠杆。面试官希望你知道代码分割决定*什么在何时加载*，tree shaking 决定*里面到底有什么*，以及 tree shaking 依赖于静态的 ESM——正是这个细节区分了真正调优过 bundle 的人和只读过相关文章的人。

代码分割

Tree shaking

权衡取舍

为什么这很重要

相关问题