BBC从ReactJS迁移到 Next.js和Vercel


直接上结果:

  • 删除了20,000多行代码
  • 删除了30多个依赖项(React路由器、Express、Babel......)
  • 平均HMR时间从1.3s缩短至131ms

BBC React 应用
BBC网站是一个大型的生产级开源React 应用程序。它是一个完全自定义的 React SPA(单页应用程序)。这种规模和范围的项目很少是公开开发的。我们钦佩并赞扬 BBC 所做的工作。这不是指指点点或指责任何人。您会看到他们在配置应用程序方面做得很好。

应用包括:

  • React
  • TypeScript
  • CSS-in-JS (Emotion)
  • Babel
  • Webpack
  • ESLint
  • Stylelint
  • Prettier
  • Cypress
  • Jest
  • Lighthouse checks
  • Web vitals monitoring
  • Optimizely (client-side experimentation)
  • Storybook
  • React Router
  • React Helmet
  • React Lazyload


这种架构对于过去 5 年构建 React 应用程序的公司和开发人员来说非常普遍。

然而今天,许多这些集成和功能都包含在 Next.js 中,几乎不需要配置。我们的目标是展示切换到 Next.js 和 Vercel 可以对您的站点性能和开发人员体验产生示范影响。

让我们以BBC网站为例,看看我们如何循序渐进地转移到Next.js和Vercel。

主要目标应该是:

  • 尽可能多地重复使用。乍一看,有相当多的代码可以被重用。Emotion是一个很好的造型库,所以现在没有必要删除或改变它。React组件和内置组件库做得很好,看起来完全可以重复使用。这些应该被利用,而不是被丢弃。
  • 尽可能多地删除。这似乎与前面的声明相矛盾,但它有不同的目的。我们要从项目中删除任何由于Next.js的功能而不再需要的东西。让我们看看我们能去掉多少东西,以减少需要维护的整体代码,这样开发人员就可以专注于功能和交付。
  • 提高开发人员的体验和性能。自定义解决方案需要创建和维护文档或传递部落知识来理解代码库并成为贡献者。利用Next.js等知名且文档齐全的框架的项目,可以更快地入职,更容易做出贡献,更快地采用新标准(如React Suspense),而不必学习它们并将其实施到自定义解决方案中,等等。

详细点击标题

迁移到 Next.js 给开发人员和用户体验带来了一些显着的好处:

  • 平均 HMR 时间从 1.3 秒提高到 131 毫秒
  • 网络请求数从57 减少到 34