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

Question

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

主题将具有许多可用的块类型组件（30个或更多），例如：

• 巨无霸
• JumboTron2
• JumbotronWithForm
• MapWide
• MapSquare
• ...

我打算基于对象数组来呈现页面，每个对象都具有一种类型（例如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来实现。但是，将引用捆绑中每个组件的文件路径，但至少不捆绑实际组件。