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

Question

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

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

• Jumbotron
• JumboTron2
• JumbotronWithForm
• 全地图
• 地图广场
• ...

我打算基于一组对象来呈现页面，每个对象都有一个类型（如 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 来实现这一点。然而，捆绑包中每个组件的文件路径都会有一个引用，但至少实际组件不会被捆绑。