移除未使用的 JavaScript

未使用的 JavaScript 可能会减慢网页加载速度：

  • 如果 JavaScript 阻止呈现，浏览器必须下载、解析、编译和评估脚本，然后才能继续进行呈现网页所需的所有其他工作。
  • 即使 JavaScript 是异步的（不会阻止渲染），代码也会在下载过程中与其他资源竞争带宽，这会对性能产生重大影响。对于没有无限流量套餐的移动用户，通过网络发送未使用的代码也是一种浪费。

未使用的 JavaScript 审核如何失败

Lighthouse 会标记每个包含超过 20 Kb 的未使用代码的 JavaScript 文件：

这项评估的屏幕截图。
点击网址列中的值，即可在新标签页中打开脚本的源代码。

如何移除未使用的 JavaScript

检测未使用的 JavaScript

Chrome 开发者工具中的“Coverage”标签页可以逐行显示未使用的代码。

Puppeteer 中的 Coverage 类可帮助您自动执行检测未使用的代码和提取所用代码的过程。

支持移除未使用的代码的构建工具

请查看以下 Tooling.Report 测试，了解您的打包器是否支持一些功能可让您更轻松地避免或移除未使用的代码：

针对特定堆栈的指南

Angular

如果您使用的是 Angular CLI，请在正式版中添加源代码映射以检查您的软件包。

Drupal

请考虑移除未使用的 JavaScript 资源，仅将所需的 Drupal 库附加到相关网页或网页中的组件。如需了解详情，请参阅定义库。

Joomla

请考虑减少或改变会在网页中加载未使用的 JavaScript 的 Joomla 扩展程序的数量。

Magento

停用 Magento 内置的 JavaScript 捆绑。

回应

如果您不使用服务器端呈现，请使用 React.lazy() 拆分 JavaScript 软件包。否则，请使用第三方库（如 loadable-components）拆分代码。

Vue

如果您使用的不是服务器端渲染并且使用的是 Vue 路由器，请按延迟加载路线拆分捆绑包。

WordPress

不妨考虑减少或改变会在您网页中加载未使用的 JavaScript 的 WordPress 插件的数量。

资源