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

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

该主题将提供许多块类型组件（30个或更多），如：

• 巨无霸
• 巨无霸2
• 巨无霸
• 地图范围
• 地图广场

我打算基于一个对象数组来呈现页面，每个对象都有一个类型（比如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>)}
}

异步组件didmount（）{ 如果需要（jumbotronTypeRequired）{ this.jumbotron=等待导入（'./../components/jumbotron'）； } this.setState（{dynamicComponentsLoaded:true}）； } render（）{ if（this.state.dynamicComponentsLoaded）{ //渲染所有 } else{返回（加载…} } …我只能在承诺中获取组件，这意味着组件将在ComponentDidMount之后完全呈现，这对SEO不利，因为生成的HTML将不包含完全呈现的数据

---

盖茨比是否有办法只包含呈现动态页面所需的组件，同时保留完全呈现的HTML（而不仅仅是呈现“加载…”）？

您可以使用插件盖茨比插件可加载组件ssr来实现这一点。不过，捆绑包中每个组件的文件路径都会有一个引用，但至少实际的组件不会被捆绑。

Hum，我正在进一步挖掘，也许可以在createPages方法（）中完成。这种方式可以在页面组件创建之前获取组件。你破解了吗？对于任何谷歌朋友来说，盖茨比似乎很快就会明白这一点