移除未使用的代码

npm 让向项目添加代码变得轻而易举。但这些多余的字节真的会用光吗？

Houssein Djirdeh

像 npm 这样的注册管理机构允许任何人轻松下载和使用超过 50 万个公开软件包，从而使 JavaScript 环境变得更好。但我们经常会包含 未得到充分利用的库如需解决此问题，请分析您的软件包以检测未使用的代码。然后移除未使用和不必要的库。

对核心网页指标的影响

通过移除未使用的代码，您可以改进网站的核心网页指标。例如，Largest Contentful Paint 可能会受到未使用的代码的影响，这是因为资源过大，会导致带宽争用增加。如果仅在客户端上呈现标记的大型 JavaScript 资源包含对 LCP 候选资源的引用，则 LCP 也会受到影响，因为资源可以加载的时间会延迟。

First Input Delay (FID) 和 Interaction to Next Paint (INP) 等其他指标也会受到未使用的代码的影响，因为即使是未使用的 JavaScript，也必须下载、解析、编译，然后执行。未使用的代码可能会导致资源加载时间、内存用量和主线程活动出现不必要的延迟，从而导致页面响应速度变差。

本指南向您展示了如何分析项目的代码库，帮助您处理项目中未使用的代码，并提供多种策略，帮助您从生产环境中向用户交付的 JavaScript 资源中剪除未使用的代码。

分析您的套装

开发者工具可让您轻松查看所有网络请求的大小：

1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
2. 点击网络标签页。
3. 选中停用缓存复选框。
4. 重新加载页面。

开发者工具中的 Coverage 标签页也会告诉您应用中有多少 CSS 和 JS 代码未使用。

通过 Node CLI 指定完整的 Lighthouse 配置，您还可以使用“未使用的 JavaScript”审核来跟踪您的应用随附的未使用的代码数量。

如果您碰巧使用了 webpack 作为捆绑器，Webpack Bundle 分析器可帮助您调查该捆绑包的组成要素。像其他任何插件一样，将该插件添加到 webpack 配置文件中：

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

虽然 webpack 通常用于构建单页应用，但其他捆绑器（如 Parcel 和 Rollup）也具有可用于分析软件包的可视化工具。

重新加载包含此插件的应用时，系统会显示整个软件包的可缩放树形图。

使用此可视化功能，您可以检查软件包的哪些部分大于其他部分，并更好地了解您要导入的所有库。这有助于确定您是否使用了任何未使用的库或不必要的库。

移除未使用的库

在前面的树状图图片中，单个 @firebase 网域中有相当多的软件包。如果您的网站只需要 Firebase 数据库组件，请更新导入项以提取该库：

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

需要强调的是，对于大型应用，此过程要复杂得多。

对于您确信未在任何地方使用的神秘软件包，请退一步看看哪个顶级依赖项正在使用它。尝试设法仅导入需要的组件。如果您未使用某个库，请将其移除。如果首次网页加载时不需要该库，请考虑该库是否可以采用延迟加载方式。

如果您使用了 Webpack，请查看可自动从热门库中移除未使用的代码的插件列表。

移除不必要的库

并非所有库都可以轻松拆分为多个部分并选择性地导入。在这些情况下，请考虑是否可以完全移除该库。构建自定义解决方案或采用更精简的替代方案始终都是值得考虑的选项。不过，在从应用中完全移除库之前，请务必权衡其中任一工作的复杂性和所需的工作量。