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

Question

使用的 Javascripts 但谷歌页面速度洞察显示它没有被使用。无论如何我可以删除它。在这里，我分享 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