移除未使用的代码

Houssein Djirdeh

npm 等注册表 让 JavaScript 变得更好用 下载和使用超过 50 万个公开软件包。但我们通常会添加 一些没有充分利用的库如需解决此问题，请分析您的软件包 来检测未使用的代码，然后移除未使用的库和不必要的库。

对核心网页指标的影响

通过移除未使用的代码，您可以改善网站的 核心网页指标。Largest Contentful Paint， 例如，当资源过大时，可能会受到未使用的代码的影响 与其他资源竞争带宽如果大型语言 仅在客户端上呈现标记的 JavaScript 资源 包含对 LCP 候选定位设置的引用 具体问题为：延迟何时加载这些资源。

未使用的代码还可能影响 Interaction to Next Paint (INP)， 因为即使是未使用的 JavaScript，也必须下载、解析、编译 。未使用的代码可能会导致资源加载出现不必要的延迟 时间、内存用量和主线程活动，是导致网页性能不佳的原因 响应速度。

本指南介绍了如何分析项目的代码库以查找未使用的代码，以及 提供了各种策略，用于剪除您交付的 JavaScript 资源中未使用的代码 在生产环境中的用户。

分析您的套装

开发者工具可以显示所有网络请求的大小：

  1. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  2. 点击网络标签页。
  3. 选中停用缓存复选框。
  4. 重新加载页面。
。 <ph type="x-smartling-placeholder">
</ph> 包含集合请求的“Network”面板
显示 JavaScript 文件大小的开发者工具。

覆盖率标签页 开发者工具还会告诉您应用中有多少 CSS 和 JS 代码未被使用。

<ph type="x-smartling-placeholder">
</ph> 开发者工具中的代码覆盖率
“覆盖率”标签页。

通过 Node CLI 指定完整的 Lighthouse 配置，您可以运行 减少未使用的 JavaScript 审核，以跟踪有多少未使用的代码被传递

<ph type="x-smartling-placeholder">
</ph> Lighthouse 减少未使用的 JavaScript 报告
减少未使用的 JavaScript 报告。

如果您使用 webpack 作为捆绑器， Webpack 软件包分析器 可帮助您调查该软件包的组成部分。将该插件添加到您的 webpack 配置文件与任何其他插件一样：

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

虽然 Webpack 通常用于构建单页应用，但 捆绑器，例如 Parcel 和 Rollup也提供了可视化工具 来分析您的软件包

重新加载包含此插件的应用会显示可缩放的树状图 您的整个套装。

<ph type="x-smartling-placeholder">
</ph> Webpack 软件包分析器
Webpack Bundle Analyzer 的树状图视图。

此可视化效果演示了软件包的哪些部分大于 以便您更好地了解库的数量和大小 。这有助于确定您是否使用了任何未使用的 或不必要的库

移除未使用的库

在之前的树状图图像中，单个 @firebase 网域。如果您的网站只需要 Firebase 数据库组件， 更新导入文件以获取该库：

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

对于看起来神秘的包裹，您确定没有在使用 请后退一步，看看哪些顶级依赖项 使用它。尝试设法仅从其中导入您需要的组件。 如果您未使用某个库，请将其移除。如果该库不是 网页初始加载时，请考虑使用延迟加载 。

如果您使用了 webpack，请查看自动 从常用库中移除未使用的代码。

移除不必要的库

并非所有库都可以拆分成部分并有选择地导入。 在这些情况下，请考虑您是否可以完全移除库。 构建自定义解决方案或使用更精简的替代方案应始终 值得考虑的选项然而，在选择这种架构时， 在移除库之前，其中任一策略所需的工作量 完全来自您的应用