npm 等注册表允许任何人下载和使用超过 50 万个公开软件包，使得 JavaScript 环境向前发展。但我们经常会包含尚未完全使用的库如需解决此问题，请分析您的软件包以检测未使用的代码，然后移除未使用的库和不必要的库。
对核心网页指标的影响
通过移除未使用的代码，您可以改进网站的核心网页指标。例如，当不必要的大型资源与其他资源竞争带宽时，Largest Contentful Paint 可能会受到未使用的代码的影响。如果仅在客户端上呈现标记的大型 JavaScript 资源包含对 LCP 候选项的引用，则 LCP 也会受到影响，因为这些资源加载的时间会延迟。
未使用的代码还会影响与下一次绘制的交互 (INP)，因为即使是未使用的 JavaScript，也必须下载、解析、编译，然后执行。未使用的代码可能会导致资源加载时间、内存用量和主线程活动出现不必要的延迟，从而导致页面响应速度变差。
本指南介绍如何分析项目的代码库以找出未使用的代码，并提供多种策略，供您从生产环境中向用户交付的 JavaScript 资源中剪除未使用的代码。
分析您的套装
开发者工具可以显示所有网络请求的大小：
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击网络标签页。
- 选中停用缓存复选框。
- 重新加载页面。
开发者工具中的 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，请查看可自动从热门库中移除未使用的代码的插件列表。
移除不必要的库
并非所有库都可以拆分为多个部分并选择性地导入。在这些情况下，请考虑是否可以完全移除该库。构建自定义解决方案或采用更轻量级的替代方案始终都是值得考虑的选项。不过，在将库从应用中完全移除之前，请务必权衡这两种策略所需的复杂性和工作量。