升级Gatsby 4后缓存render-page.js过大触发BABEL警告如何解决

问题说明 #

你遇到的是Babel默认的性能保护提示，不属于报错，不影响项目正常运行：当Babel编译的单文件体积超过500KB默认阈值时，会自动关闭代码生成阶段的部分样式优化，避免编译耗时过长。

处理方案 #

按优先级选择即可：

• 优先清理缓存解决版本升级残留问题
  执行以下命令清理Gatsby本地缓存和构建产物后，重新启动项目即可，大部分升级导致的该问题都能通过该方案解决：

  gatsby clean && gatsby develop
  

• 调整Babel配置消除提示
  如果清理缓存后仍有提示，可在项目根目录新建/修改babel.config.js，添加如下配置强制开启大文件压缩，消除提示：

  module.exports = {
    presets: ["babel-preset-gatsby"],
    generatorOpts: {
      compact: true
    }
  }
  

• 长期代码优化
  若要从根源解决文件过大问题，可做以下优化：
  • 检查gatsby-ssr.js、gatsby-browser.js全局入口文件，移除未使用的大体积依赖，替换为按需导入
  • 非首屏必要组件使用@loadable/component实现SSR兼容的懒加载，避免全量打包进渲染文件
  • 移除项目中未使用的Gatsby插件，比如未用到TypeScript能力可先卸载gatsby-ts测试体积变化

如果不需要极致的编译速度，也可以直接忽略该提示，不会对线上功能和用户体验产生任何影响。

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