时间戳

首页 > 解决方案 > 如何指定可以在哪些页面加载stripejs脚本？

javascript - 如何指定可以在哪些页面加载stripejs脚本？

问题描述

Stripe 的脚本导致大量主线程阻塞，如 Google Insights 中的图片所示

谷歌洞察图片

我的问题是受影响的页面只是一个不需要条纹的页面。但显然 stripejs 库将其第三方脚本插入页面的头部，所以这是一个 SPA，这意味着它在每个页面中。

如何使该第三方脚本仅插入到积极使用该库的组件中？

其他改善或缓解阻塞的方法将不胜感激，谢谢

标签： javascriptreactjsfrontendnext.js

解决方案

You could use script tag with async inside next/head component on the needed page:

import Head from 'next/head';

// ...

        <Head>
          <script async src="https://js.stripe.com/v3" />
        </Head>

It would only be downloaded if user requests that page.

Although Stripe recommends to use it on every page:

To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page.

推荐阅读