javascript - 有条件地在 Gatsby 中导入组件以获得非常动态的模板

Question

我计划为 Gatsby 构建一个非常动态的单页网站模板。

主题将有许多可用的 block 类型组件(30 个或更多)，例如:

• 超大屏幕
• JumboTron2
• JumbotronWithForm
• map 范围
• map 广场
• ...

我打算根据对象数组呈现页面，每个对象都有一个类型(如 Jumbotron)来匹配组件和呈现它的必要数据。

如果我静态导入所有这些组件...

import Jumbotron from './../components/Jumbtron';

...它们都会包含在生成的 JS 中，这很糟糕，因为我的 JS 会太大。

如果我使用动态导入...

async componentDidMount(){
   if(jumbotronTypeRequired){
       this.jumbotron =  await import('./../components/Jumbotron');
   }
   this.setState({ dynamicComponentsLoaded: true });
}

render(){
   if(this.state.dynamicComponentsLoaded){
      //render all
   }
   else{return (<div>Loading...</div>)}
}

...我只能在 Promise 中获取组件，这意味着组件将在 ComponentDidMount 之后完全呈现，这对 SEO 不利，因为我生成的 HTML 将不包含完全呈现的数据。

Gatsby 是否有办法只包含呈现动态页面所必需的组件，同时保持完整呈现的 HTML(而不仅仅是呈现“正在加载...”)？

Answer 1

您可以使用插件 gatsby-plugin-loadable-components-ssr 来实现这一点。然而，将有对 bundle 中每个组件的文件路径的引用，但至少实际组件不会被捆绑。