在页面中删除未使用的 JavaScript 代码

在页面中删除未使用的 JavaScript 代码

在页面中删除未使用的 JavaScript 代码

npm 使向你的项目中添加代码变得轻而易举。但是,你真的使用了所有 JavaScript 文件吗?

诸如 npm 之类的软件包允许任何人轻松下载和使用超过一百万个公共软件包,已经使 JavaScript 的世界变得更加美好。但是我们经常会包含没有充分利用的库。要解决此问题,请分析你的捆绑软件 以检测未使用的代码。然后删除未使用和不需要的库。

分析未使用的资源

DevTools 使查看所有网络请求的大小变得容易:

  1. Control+Shift+J(或Command+Option+J在 Mac 上)按打开 DevTools。
  2. 单击网络选项卡。
  3. 选择禁用缓存复选框。
  4. 重新加载页面。

DevTools 中的 Coverage 选项卡还将告诉你应用程序中有多少 CSS 和 JS 代码未使用。

通过通过其节点 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';

需要强调的是,对于较大的应用程序,此过程要复杂得多。

对于你非常确定不会在任何地方使用的看起来很神秘的软件包,请退后一步,查看哪些顶级依赖项正在使用它。尝试找到一种仅从中导入所需组件的方法。如果你不使用库,请将其删除。如果初始页面加载不需要该库,请考虑是否可以延迟加载它。

删除不需要的库

并非所有库都可以轻松分解为多个部分并有选择地导入。在这些情况下,请考虑是否可以完全删除该库。构建自定义解决方案或利用更轻巧的替代方案应该始终是值得考虑的选择。但是,在从应用程序中完全删除库之前,必须权衡这两项工作所需的复杂性和工作量。