有没有办法在Next.js中从库中预取调用



我正在使用来自react谷歌图表的GeoChart(https://github.com/RakanNimer/react-google-charts)我看到有很多脚本都是在完成所有操作之后加载的。就我而言https://www.gstatic.com/charts/geochart/10/info/mapList.js在最后加载时,有没有一种方法可以在加载脚本时确定优先级?

您可以使用next/script组件。

import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://www.google-analytics.com/analytics.js" />
</>
)
}

使用next/script,您可以使用strategy属性来决定何时加载第三方脚本

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

有四种不同的装载策略可供使用:

  • beforeInteractive:在页面交互之前加载
  • afterInteractive:(默认(页面交互后立即加载
  • lazyOnload:空闲时加载
  • worker:(实验(web工作者中的负载

有关详细信息,请签出文档。

相关内容

  • 没有找到相关文章

最新更新