是什么让 JS 打包体积增大，为什么体积大有害？

Question

IT Interview Practice · Accepted Answer

**bundle** 是你的构建工具打包并发送到浏览器的 JavaScript。它增大主要源于**依赖**、**重复代码**，以及**发送了页面暂时还不需要的代码**。

## 什么会让它膨胀

- **重型库**——一个日期库或图标库就能增加数百 KB。为了一个函数而导入整个 `lodash`，会把整个库都拉进来。
- **导入一切**而不是只导入你用到的：

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **没有代码分割**——整个 app（每个路由、每个模态框）都被打进一个预先加载的文件。
- **polyfill 和重复的依赖**——同一个包的两个版本被打包了两次。

## 为什么体积大有害

字节数是小问题；**解析和执行** JS 才是大问题。浏览器必须下载，然后在主线程上解析、编译并运行每一个字节——而这在一台中端手机上比在笔记本上慢得多。繁重的 JS 会延迟可交互性，并直接恶化 **INP** 和 **LCP**。

## 为什么这很重要

「就加个库嘛」正是 app 悄悄变慢的方式。面试官想看到你考虑*每个依赖的成本*，并在 bundle 膨胀之前主动使用按函数导入、tree shaking 和代码分割——尤其因为你用户的手机远比你的开发机器孱弱。

什么会让它膨胀

相关问题

为什么体积大有害

为什么这很重要