Javascript 盖茨比配置文件加载脚本

我正试图从

gatsby config.js

使用

gatsby插件加载脚本
package。
基本上所有脚本都依赖于
https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js
脚本

因此，当我运行
gatsby develope
时，所有脚本都已加载并运行良好，我转到本地主机，一切看起来都很好。
在刷新页面之后，脚本会运行，但是由于
three.min.js
它比其他脚本大（因此需要更长的时间执行），所以其他脚本在运行时失败。脚本也被缓存了

我想知道是否有一种方法可以顺序执行脚本，或者有一种方法可以不在脚本每次运行时缓存脚本

我在这里查找了一些信息，但没有很好的文档记录

有什么想法吗

初步结果：


刷新页面后的结果：


gatsby-config.js

通过在
标记中添加所有脚本，您可以在不添加额外插件的情况下获得相同的结果。Gatsby的扩展自，因此您可以在站点中通过添加以下代码段在任何组件中添加外部脚本：

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const AnyPage = () => (
    <Layout>
      <SEO title="AnyPage" />
      <Helmet>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"/>
      ... and so on
      </Helmet>
    </Layout>
)

export default AnyPage

从“React”导入React
从“反应头盔”导入头盔
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
常量AnyPage=（）=>(
等等
)
导出默认任意页面

标签，来自其文档：

此可重用的React组件将管理您对
文件头

头盔接受普通HTML标记并输出普通HTML标记。它死了
简单，反应初学者友好

通过在
标记中添加所有脚本，您可以在不添加额外插件的情况下获得相同的结果。Gatsby的扩展自，因此您可以在站点中通过添加以下代码段在任何组件中添加外部脚本：

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const AnyPage = () => (
    <Layout>
      <SEO title="AnyPage" />
      <Helmet>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"/>
      ... and so on
      </Helmet>
    </Layout>
)

export default AnyPage

从“React”导入React
从“反应头盔”导入头盔
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
常量AnyPage=（）=>(
等等
)
导出默认任意页面

标签，来自其文档：

此可重用的React组件将管理您对
文件头

头盔接受普通HTML标记并输出普通HTML标记。它死了
简单，反应初学者友好

我在第一个实例中采用了这种方法，但问题如下：
Three.js
会被缓存，因此当我第二次尝试加载页面时，浏览器会从缓存内存中获取
Three js
代码（对于其余脚本也是如此），因为这是最大的一个，所以是最后一个被加载的，所以一切都中断了，因为其他脚本依赖于
Three.js
脚本我在上面发布了一些截图：）所以我还想暂停加载其余脚本，直到
Three.js
加载完毕……我首先采用了这种方法，但是问题是：
Three.js
会被缓存，所以当我第二次尝试加载页面时，浏览器会从缓存中取出
Three js
代码（其余脚本也是如此），因为这是最大的一个，也是最后一个被加载的，所以一切都中断了，因为其他脚本依赖于
Three.js
脚本，我在上面发布了一些截图：）所以我还想暂停加载其余脚本，直到加载
Three.js
。。。