我在一个项目中使用 Next JS，并且正在使用 Google 的 Page Speed Insights 工具进行一些优化。对我的网站性能造成负面影响的主要因素之一是第 3 方脚本，主要是 Google Tag 脚本(它也加载了我的 Google Analytics)和 Google maps API 脚本。到目前为止，我已经尝试了几种方法来抵消这两个库的加载，但我仍然从该工具中收到以下消息:
删除未使用的 JavaScript
https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US
(maps.googleapis.com)
https://www.googletagmanager.com/gtag/js?id=UA-123123-2
(www.googletagmanager.com)
_document.js
import Document, { Head, Main, NextScript, Html } from "next/document";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<script
defer
src={`https://www.googletagmanager.com/gtag/js?id=UA-123123-2`}
/>
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US"
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123123-2');
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
defer 加载脚本。像往常一样支撑。但是，使用这种方法，谷歌页面速度见解仍然给我同样的信息。然后我尝试了一种不同的方法，使用 Next JS 中名为 ScriptLoader 的实验组件。其目的是允许人们推迟脚本。这是该组件的链接:https://github.com/vercel/next.js/discussions/18172
这是我的实现:
_app.js
import App from "next/app";
import ScriptLoader from "next/dist/client/experimental-script.js";
export default class NextApp extends App {
render() {
return (<>
<ScriptLoader
strategy="defer"
src="https://www.googletagmanager.com/gtag/js?id=UA-123123-2"
/>
<ScriptLoader
strategy="defer"
src="https://maps.googleapis.com/maps/api/js?key=asdafsafasafasfasf&libraries=places&language=en®ion=US"
/>
</>)
}
}
谢谢
最佳答案
谷歌分析/Gtag
根据我自己的经验，我不得不遗憾地告诉您，延迟加载分析并不是一个好主意，并且在调用不存在的函数时经常会导致意外错误(尚不存在)。所以最好在一开始就加载它，即使谷歌惩罚你使用他们自己的脚本很糟糕。因此，我认为您通过自定义 _document.js 文件加载 gtag 的初始方法很好。
谷歌地图
谢天谢地，谷歌地图不一样了。有一个名为 Google Maps JavaScript API Loader 的 npm 包.这使得动态加载 map 成为可能或更容易。除此之外，您还可以利用 dynamic import functionality JavaScript 的。您可以创建一个自定义加载函数，该函数仅在满足某些条件后触发。它可能看起来像这样:
const myCustomLoadFunction = async () => {
try {
const { Loader } = await import("@googlemaps/js-api-loader");
const loader = new Loader({
apiKey: "YOUR_API_KEY",
version: "weekly",
// ...additionalOptions,
});
const mapOptions = {
center: { lat: 0, lng: 0 },
zoom: 4,
};
await loader.load();
new google.maps.Map(document.getElementById("map"), mapOptions);
} catch (e) {
// do something
}
};
useEffect当用户悬停在某处或单击某物时， Hook 甚至调用它，从而延迟导入更长时间。
关于javascript - 使用 Next JS 延迟脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66445292/