下一步JS添加async属性为生成一个脚本文件列表

Question

我们正在使用nextJs应用程序。我们需要对所有现有的脚本标签应用async。我试了很多次。任何一次都可以帮我。

<script src="/_next/static/chunks/webpack.js?ts=1634913314210"></script>
<script src="/_next/static/chunks/main.js?ts=1634913314210"></script>
<script src="/_next/static/chunks/pages/_app.js?ts=1634913314210"></script>

修改后

<script src="/_next/static/chunks/webpack.js?ts=1634913314210" async></script>
<script src="/_next/static/chunks/main.js?ts=1634913314210" async></script>
<script src="/_next/static/chunks/pages/_app.js?ts=1634913314210" async></script>

Answer 1

如果您正在运行NextJS v10.2.1或更新版本，你可以告诉NextJS用defer而不是async来渲染这些资源，通过在你的next.config.js中设置以下标志:

module.exports = {
experimental: { disableOptimizedLoading: true },
}

注意，这只会禁用生产构建的async标记，而不是开发构建。此外，它还改变了一些与脚本加载相关的其他机制。

要了解更多细节，请查看_document的实现。tsx getScripts，它将此方法公开为NextScript组件。如果您希望对这些脚本标签有更细粒度的控制，您可以通过实现您自己的NextScript版本来提供您自己的getScripts方法的实现。

下面是我从NextJS GitHub项目中提取的相关问题的示例。你可能还想读一下这个线程，以便更好地理解async在这种情况下是如何工作的。

class DeferredNextScript extends NextScript {
getScripts() {
return super.getScripts().map(script => {
return React.cloneElement(script, {
key: script.props.src,
defer: true,
async: false,
})
})
}
getDynamicChunks() {
return super.getDynamicChunks().map(script => {
return React.cloneElement(script, {
key: script.props.src,
defer: true,
async: false,
})
})
}
}