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 它比其他的大（因此需要更长的时间来执行），其他的脚本运行失败。另外，这些脚本也被缓存了。

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

我在这里找了一些信息 https:/www.gatsbyjs.orgpackagesgatsby-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> 标签。盖茨比的从 React头盔 所以你可以在你的网站中使用，通过添加以下代码段在任何组件中添加外部脚本。

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初学者友好。