Gatsby项目接入Tailwind后页面刷新出现300ms样式加载延迟求排查

直接导致300ms加载延迟的核心遗漏 #

• 仅在gatsby-browser.js中导入全局样式文件，缺失gatsby-ssr.js的同路径样式导入。Gatsby在构建初始静态HTML时，只会识别gatsby-ssr.js入口中声明的全局依赖，仅在浏览器端入口导入的样式不会被注入到初始HTML里，浏览器拿到页面后必须等待JS加载、执行完成后，才会动态插入之前在浏览器入口中导入的CSS资源，完全对应你观测到的300ms左右的样式空白延迟。
  修正方式：在项目根目录新建gatsby-ssr.js，写入和gatsby-browser.js完全一致的样式导入语句：

  import "./src/styles/global.css"
  

其余配置遗漏点 #

• Tailwind内容扫描路径覆盖不全：当前tailwind.config.js的purge配置仅扫描.js/.jsx后缀文件，遗漏了Gatsby项目中会使用Tailwind类的其他文件类型（.ts/.tsx、.html、.mdx）以及Gatsby自身的配置文件，会增加开发环境的样式编译耗时，甚至在生产构建阶段误删正在使用的样式类。正确的扫描路径配置为：

  purge: ["./src/**/*.{js,jsx,ts,tsx,html,mdx}", "./gatsby-*.js"]
  

• gatsby-plugin-postcss注册方式不严谨：当前在gatsby-config.js中直接以字符串形式注册插件，当项目后续引入其他样式处理插件（如sass、less处理插件）时，容易因为Gatsby插件默认的倒序加载规则颠倒postcss的处理链路，导致样式编译失效。建议以对象形式明确注册插件，保障postcss在样式处理链路的最后一环执行：

  // gatsby-config.js 中的plugins数组写法
  plugins: [
    {
      resolve: 'gatsby-plugin-postcss',
      options: {}
    }
  ]
  

• 若完成以上调整后仍存在轻微加载延迟，配置开启Gatsby内置的静态资源内联能力，将编译后的小体积CSS直接内嵌到初始HTML中，完全消除CSS资源的额外网络请求耗时。

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