javascript - 页面加载后在 React 中加载第三方 iframe，使 iframe 不影响 PageSpeed 得分

Question

我有一个 iframe加载第三方小部件。我只想显示这个iframe在我的页面加载后，因为我不想减慢我的页面加载速度。我关注了 medium article其中描述了如何执行此操作，但他们的解决方案不起作用，因为 onload函数, finishLoading , 永远不会被调用

export default ({src, width, height}) => {

  const [loading, stillLoading] = useState(true)
  const finishLoading = () => {
      alert('finished loading')
      stillLoading(false)
  }
  ...
  return(
    {loading ? '' : 
      <iframe
        src={src}
        width={width}
        height={height}
        scrolling="no"
        onLoad={finishLoading}
      >
        className={`tpwidget flex-center-row`}>
      </iframe>
    }
  )
}

更新
通过使用 useEffect，我可以让 iframe 在其他所有内容之后加载(理论上)，但我发现删除 iframe 可以完全提高我的 PageSpeed 分数，并且仅在(使用 useEffect)之后加载 iframe 并没有太大的积极影响在 PageSpeed 上。

如果有帮助，域名是 suddenlysask.com第三方小部件是亚马逊广告。

Answer 1

更新
我访问了该网站，我确定您使用的是 Gatsby。 Gatsby 正在使用 SSR，React.lazy 和 Suspense 还不能用于服务器端渲染。如果您想在服务器渲染的应用程序中进行代码拆分，Loadable Components推荐在 React docs .它有一个不错的guide for bundle splitting with server-side rendering .
有一个 gatsby 插件让你的生活更轻松gatsby-plugin-loadable-components-ssr .安装并配置插件后，您可以使用 loadable像这样:AmazonFrame.js

import React from "react";

const AmazonFrame = ({ src, width, height }) => (
  <iframe src={src} width={width} height={height} scrolling="no"></iframe>
);

App.js

import React from "react";
import loadable from "@loadable/component";

const AmazonFrame = loadable(() => import("./AmazonFrame"), {
  fallback: <div>Loading...</div>
});

function App() {
  return (
    <div>
      <AmazonFrame src="src" width="100%" height="200px" />
    </div>
  );
}

export default App;

或者

import React from "react";
import loadable from "@loadable/component";

const AmazonFrame = loadable(() => import("./AmazonFrame"));

function App() {
  return (
    <div>
      <AmazonFrame fallback={<div>Loading...</div>} />
    </div>
  );
}

export default App;

原答案
您需要使用 Code-Splitting . Code-Splitting 是 Webpack、Rollup 和 Browserify(通过 factor-bundle)等捆绑器支持的功能，它可以创建多个可以在运行时动态加载的捆绑包。
如果你正在使用 Create React App，这已经为你配置好了，你可以立即开始使用它。
对你的应用程序进行代码拆分可以帮助你“延迟加载”用户当前需要的东西，这可以显着提高你的应用程序的性能。虽然您没有减少应用程序中的代码总量，但您避免了加载用户可能永远不需要的代码，并减少了初始加载期间所需的代码量。
这是您的问题的示例解决方案，它将延迟加载亚马逊广告 iframe因此它不会与您的初始捆绑包一起加载: AmazonFrame.js

import React from "react";

const AmazonFrame = ({ src, width, height }) => (
  <iframe src={src} width={width} height={height} scrolling="no"></iframe>
);

export default AmazonFrame;

App.js

import React, { Suspense, lazy } from "react";

// React.lazy takes a function that must call a dynamic import(). This must return a Promise
// which resolves to a module with a default export containing a React component.
const AmazonFrame = lazy(() => import("./AmazonFrame"));
function App() {
  return (
    <div>
      {/* The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback
       content (such as a loading indicator) while we’re waiting for the lazy component to load */}
      {/* The fallback prop accepts any React elements that you want to render while waiting for the component to load */}
      <Suspense fallback={<div>Loading...</div>}>
        <AmazonFrame src="src" width="100%" height="200px" />
      </Suspense>
    </div>
  );
}

export default App;