像 npm 这样的注册表通过允许任何人下载和使用超过五十万个公共软件包，从而更好地改变了 JavaScript 世界。但是我们经常包含我们没有完全使用的库。为了解决这个问题，分析您的捆绑包以检测未使用的代码，然后移除未使用和不必要的库。
对 Core Web Vitals 的影响
通过移除未使用的代码，您可以改进网站的 Core Web Vitals。最大内容渲染时间 (LCP) 例如，当不必要的大型资源与其他资源争夺带宽时，可能会受到未使用代码的影响。如果大型 JavaScript 资源仅在客户端渲染标记 包含对 LCP 候选元素的引用，也可能通过 延迟这些资源的加载时间 来影响 LCP。
未使用的代码也可能影响 交互到下次绘制 (INP)，因为即使是未使用的 JavaScript 也必须下载、解析、编译，然后执行。未使用的代码可能会引入不必要的资源加载时间延迟、内存使用和主线程活动，从而导致页面响应速度不佳。
本指南解释了如何分析项目代码库中未使用的代码，并提供了从您交付给用户的生产环境 JavaScript 资源中修剪未使用代码的策略。
分析您的捆绑包
DevTools 可以显示所有网络请求的大小
- 按 `Control+Shift+J`（或 Mac 上的 `Command+Option+J`）打开 DevTools。
- 点击 Network 选项卡。
- 选择 Disable cache 复选框。
- 重新加载页面。
DevTools 中的 Coverage 选项卡还告诉您应用程序中有多少 CSS 和 JS 代码是未使用的。
通过 Node CLI 指定完整的 Lighthouse 配置，您可以运行“减少未使用的 JavaScript”审核，以跟踪应用程序附带了多少未使用的代码。
如果您使用 webpack 作为捆绑器，Webpack Bundle Analyzer 可以帮助您调查捆绑包的组成。将插件包含在您的 webpack 配置文件中，就像包含任何其他插件一样
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
尽管 webpack 通常用于构建单页应用程序，但其他捆绑器（如 Parcel 和 Rollup）也具有可视化工具，您可以使用这些工具来分析您的捆绑包。
重新加载包含此插件的应用程序会显示整个捆绑包的可缩放树状图。
此可视化演示了捆绑包的哪些部分较大，因此您可以更好地了解应用程序导入的库的数量和大小。这可以帮助识别您是否正在使用任何未使用或不必要的库。
移除未使用的库
在之前的树状图图像中，单个 @firebase 域中有很多软件包。如果您的网站只需要 firebase 数据库组件，请更新导入以获取该库
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
对于您非常确定任何地方都没有使用的神秘软件包，请退后一步，看看您的顶层依赖项中有哪些在使用它。尝试找到一种方法，仅从中导入您需要的组件。如果您没有使用某个库，请将其移除。如果初始页面加载不需要该库，请考虑延迟加载它。
如果您正在使用 webpack，请查看 自动从常用库中移除未使用代码的插件列表。
移除不必要的库
并非所有库都可以分解为多个部分并选择性导入。在这些情况下，请考虑是否可以完全移除该库。构建自定义解决方案或利用更轻量级的替代方案始终是值得考虑的选项。但是，在完全从应用程序中移除库之前，权衡这两种策略所需的复杂性和工作量非常重要。