Gatsby框架CSS加载机制疑问：如何实现页面与组件CSS按需加载

完全可以实现仅加载当前访问页面及用到组件对应的CSS，常用实现方案如下：

• 使用CSS Modules：给每个页面或组件单独创建带.module.css后缀的样式文件（支持scss、less等预处理器对应后缀），在对应页面/组件内局部引入即可，Gatsby会自动对这部分样式做代码拆分，只有当前资源被渲染时才会加载对应CSS，不会被合并到全局样式包中。示例引入写法：

// 首页index.js中引入首页专属样式
import * as styles from './index.module.css'

• 懒加载组件配合CSS自动拆分：对于不首屏渲染的组件，使用Gatsby官方推荐的@loadable/component做懒加载时，组件对应的CSS也会和组件JS bundle自动拆分，只有组件被触发加载时才会请求对应CSS。示例写法：

import loadable from '@loadable/component'
// 异步加载的弹窗组件，对应CSS会随组件按需加载
const AsyncModal = loadable(() => import('./components/AsyncModal'))

• 修改webpack配置拆分全局CSS：如果有全局引入的CSS需要按路由拆分，可以在项目根目录的gatsby-node.js中添加如下配置，即可禁用默认的全局CSS合并逻辑，按路由拆分CSS资源：

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (stage === "build-javascript") {
    actions.setWebpackConfig({
      optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: false,
              test: /\.(css|scss|less)$/,
              chunks: "all",
              enforce: true,
            },
          },
        },
      },
    })
  }
}

注意：在gatsby-browser.js、全局Layout组件中引入的CSS会被默认作为全局样式全量加载，如需拆分不要在上述位置引入非全局通用的样式。

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