Gatsby项目中使用loadable-components实现按需加载与SSR-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01034/article/details/148325531

Gatsby项目中使用loadable-components实现按需加载与SSR

gatsby The best React-based framework with performance, scalability and security built in. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby

什么是loadable-components

loadable-components是一个用于React应用的代码分割库，它允许开发者将组件按需加载，从而优化应用性能。在Gatsby项目中，虽然Gatsby本身已经提供了优秀的代码分割功能，但在某些特定场景下，我们仍然需要借助loadable-components来实现更精细的代码分割控制。

为什么需要在Gatsby中使用loadable-components

Gatsby默认的代码分割是基于页面级别的，这意味着每个页面模板中导入的所有组件都会被打包到该页面的bundle中，无论这些组件是否实际被渲染。这种机制在大多数情况下工作良好，但在以下两种场景中可能会造成资源浪费：

1. 灵活布局场景

当使用无头CMS构建页面时，内容编辑者可能需要灵活组合和排序组件。这种情况下，我们通常会使用条件渲染来处理不同的组件组合：

const FlexPage = ({ components }) => {
  return (
    <>
      {components.map(component => {
        switch (component.type) {
          case "header":
            return <Header {...component} />
          case "text":
            return <Text {...component} />
          case "carousel":
            return <Carousel {...component} />
          default:
            return <div>empty</div>
        }
      })}
    </>
  )
}

2. 逻辑条件渲染场景

在组件内部根据条件决定是否渲染某些子组件：

const FlexPage = ({ hasCarousel }) => {
  return (
    <div>
      <Heading />
      <Text />
      {hasCarousel && <Carousel />}
    </div>
  )
}

在这两种情况下，即使某些组件(如Carousel)没有被实际渲染，它们仍然会被包含在最终的bundle中，增加了不必要的资源加载。

如何配置loadable-components

要在Gatsby中正确使用loadable-components并保持服务端渲染(SSR)支持，需要以下步骤：

安装必要的依赖：

npm install @loadable/component gatsby-plugin-loadable-components-ssr

在gatsby-config.js中添加插件配置：

module.exports = {
  plugins: [`gatsby-plugin-loadable-components-ssr`]
}

使用loadable动态导入组件：

import loadable from '@loadable/component'

const Header = loadable(() => import('./header'))

实现原理

loadable-components的工作原理是通过动态import()语法告诉webpack将这些组件拆分成单独的chunk。当组件实际需要渲染时，浏览器才会加载对应的代码。

Gatsby插件gatsby-plugin-loadable-components-ssr确保了在服务端渲染时也能正确处理这些动态组件，避免出现客户端渲染导致的闪烁问题。

验证配置是否生效

配置完成后，可以通过以下方法验证代码分割和服务端渲染是否正常工作：

验证代码分割：
- 构建并本地运行项目
- 打开浏览器开发者工具的Network面板
- 查找命名模式为component--[my-component]-[hash].js的JS bundle
验证SSR：
- 在Network面板中选择"All"选项
- 查看第一个请求localhost(初始HTML响应)
- 确认动态加载的组件内容已经包含在初始HTML中