页面加载后在React中加载第三方iframe，这样iframe就不会影响PageSpeed分数

Question

我有一个iframe加载第三方小部件的。我只想iframe在页面加载后显示此内容，因为我不想减慢页面加载速度。我遵循了一篇中等文章，其中描述了如何执行此操作，但他们的解决方案不起作用，因为函数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 并没有太大的积极效果关于页面速度。

---

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

Answer 1

更新

\n

我访问了该网站，我确信您正在使用 Gatsby。Gatsby 使用的是 SSR，React.lazy 和 Suspense 尚不能用于服务器端渲染。如果你想在服务器渲染的应用程序中进行代码分割，React 文档中推荐使用Loadable Components。它有一个关于服务器端渲染的捆绑包分割的很好的指南。

\n

有一个 gatsby 插件可以让您的生活更轻松gatsby-plugin-loadable-components-ssr。安装并配置插件后即可使用loadable像这样使用：

\n

AmazonFrame.js

\n

import React from "react";\n\nconst AmazonFrame = ({ src, width, height }) => (\n  <iframe src={src} width={width} height={height} scrolling="no"></iframe>\n);\n

\n

App.js

\n

import React from "react";\nimport loadable from "@loadable/component";\n\nconst AmazonFrame = loadable(() => import("./AmazonFrame"), {\n  fallback: <div>Loading...</div>\n});\n\nfunction App() {\n  return (\n    <div>\n      <AmazonFrame src="src" width="100%" height="200px" />\n    </div>\n  );\n}\n\nexport default App;\n

\n

或者

\n

import React from "react";\nimport loadable from "@loadable/component";\n\nconst AmazonFrame = loadable(() => import("./AmazonFrame"));\n\nfunction App() {\n  return (\n    <div>\n      <AmazonFrame fallback={<div>Loading...</div>} />\n    </div>\n  );\n}\n\nexport default App;\n

\n

原答案

\n

您需要使用代码分割。代码分割是 Webpack、Rollup 和 Browserify（通过因子捆绑）等捆绑器支持的一项功能，它可以创建多个可以在运行时动态加载的捆绑包。

\n

如果您\xe2\x80\x99正在使用Create React App，则已经为您配置好了，您可以立即开始使用它。

\n

对应用程序进行代码分割可以帮助您\xe2\x80\x9clazy-load\xe2\x80\x9d 获取用户当前需要的内容，这可以显着提高应用程序的性能。虽然您没有减少应用程序中的代码总量，但您避免了加载用户可能永远不需要的代码，并减少了初始加载期间所需的代码量。

\n

以下是解决您问题的示例解决方案，它将延迟加载亚马逊广告iframe，因此它不会与您的初始捆绑包一起加载：

\n

AmazonFrame.js

\n

import React from "react";\n\nconst AmazonFrame = ({ src, width, height }) => (\n  <iframe src={src} width={width} height={height} scrolling="no"></iframe>\n);\n\nexport default AmazonFrame;\n

\n

App.js

\n

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

\n