gatsby 配置文件加载脚本

Question

我正在尝试从gatsby-config.js 加载一些脚本 使用gatsby-plugin-load-script 包。 基本上所有脚本都依赖于https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js 脚本。

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

我想知道是否有办法顺序执行脚本，或者每次运行时不缓存脚本。

我在 https://www.gatsbyjs.org/packages/gatsby-plugin-load-script/ 上查找了一些信息，但没有很好的记录。

有什么想法吗？？

初步结果：

页面刷新后的结果：

gatsby-config.js

module.exports = {
      siteMetadata: {
        title: `Gatsby Default Starter`,
        author: `@gatsbyjs`,
      },
      plugins: [
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        {   
          resolve: "gatsby-plugin-load-script", 
          options: {    
            src: "https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js",    
    
          },    
        },  
    
        {   
          resolve: "gatsby-plugin-load-script", 
          options: {    
            src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/CopyShader.js", 
          },    
        },  
    
        {   
          resolve: "gatsby-plugin-load-script", 
          options: {    
            src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/03_glitch.js",    
    
          },    
        },  
        {   
          resolve: "gatsby-plugin-load-script", 
          options: {    
            src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/EffectComposer.js", 
    
          },    
        },  
        ]
        }

Answer 1

通过将所有脚本添加到<Helmet> 标记中，您无需添加额外的插件即可获得相同的结果。 Gatsby's 扩展自 React Helmet，因此您可以通过添加以下 sn-p 在您的站点中使用在任何组件中添加外部脚本：

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

<Helmet> 标签，来自他们的文档：

这个可重用的 React 组件将管理你对 文件头。

Helmet 采用纯 HTML 标签并输出纯 HTML 标签。它死了 简单，对 React 初学者友好。