Gatsby.js如何实现React组件及第三方库的动态加载？

Gatsby 完全支持类似 Next.js 的动态导入、代码分割能力，有两种常用实现方式：

1. 原生ES动态导入（仅客户端场景适用） #

如果要加载的组件/库不需要参与服务端渲染，仅在客户端交互后才加载，可以直接使用标准import()语法，无需额外依赖：

import { useState } from 'react'

const Demo = () => {
  const [HeavyComp, setHeavyComp] = useState(null)

  const loadComponent = async () => {
    // 动态加载组件
    const compModule = await import('../components/heavy-component')
    setHeavyComp(compModule.default)
  }

  return (
    <div>
      <button onClick={loadComponent}>加载重型组件</button>
      {HeavyComp && <HeavyComp />}
    </div>
  )
}

注意：该方式搭配React.lazy使用时，默认不支持服务端渲染，仅适合纯客户端场景

2. @loadable/component（官方推荐，对齐Next.js dynamic特性） #

这是Gatsby官方推荐的方案，和Next.js内置的dynamic()用法高度一致，支持服务端渲染、加载占位、SSR开关等特性，可直接平替Next的dynamic功能。

第一步：安装依赖 #

npm install @loadable/component
# TypeScript用户额外安装类型声明
npm install @types/loadable__component -D

基础用法（和你示例的Next用法几乎一致） #

import loadable from '@loadable/component'

// 等价于 Next.js 中的 dynamic(() => import('../components/hello'))
const HelloComponent = loadable(() => import('../components/hello'))

const Parent = () => {
  return <HelloComponent />
}

高级配置 #

支持自定义加载占位、关闭服务端渲染等参数：

const HelloComponent = loadable(() => import('../components/hello'), {
  // 加载过程中显示的占位内容
  fallback: <div>组件加载中...</div>,
  // 关闭服务端渲染，等价于 Next.js dynamic 的 ssr: false 配置
  ssr: false
})

动态加载第三方库 #

也可以用同样的方式动态加载第三方依赖，减少首屏包体积：

const loadMoment = loadable(() => import('moment'))

内容的提问来源于stack exchange，提问作者Vasyl Gutnyk