Google PageSpeed Insights 显示未使用的 javascript 但已使用

Question

使用了 Javascript，但谷歌页面速度洞察显示它没有被使用。无论如何我可以删除它。我在这里分享PageSpeedInsight报告的屏幕截图。

在上面的截图中你可以看到 8 个 js 文件未被使用。但它正在我的应用程序中使用。

Answer 1

您可以在滚动时加载脚本文件。当用户开始向下滚动时，您将脚本标签附加到您的头部并再次删除事件侦听器。

仅在开头添加不在视口中的脚本，例如 recaptchas。它们通常位于底部。

function dynamicLoad(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}
window.addEventListener("scroll", loadScripts);

function loadScripts() {
  //load here as many dynamic scripts as you want
  dynamicLoad("recaptcha url");
  dynamicLoad("facebook.net url");
  //end ------
  window.removeEventListener("scroll", loadScripts);
}

Answer 2

注意：这个答案是由于混淆。 OP 没有使用 React，但报告中包含了 React 示例。这可能对其他人有帮助 无论如何。

如果您的组件是动态加载的（仅在用户请求之后）。

您可以按照报告中的建议使用React.lazy() 进行代码拆分，这样您就不会在不需要时加载大包。

此解决方案适用于非 SSR。

之前：

import ComponentB from './ComponentB';

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

之后：

import React, { lazy } from 'react';
const ComponentB = lazy(() => import("./ComponentB.js"));

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

参考：https://reactjs.org/docs/code-splitting.html