Vercel 如何采用微前端
Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends.
了解Vercel如何通过微前端减少构建时间并提高开发者速度，同时保持流畅的用户体验。
Vercel's main website, once a single large Next.js application, serves both our website visitors and logged-in dashboard. But, as Vercel grew, this setup revealed opportunities for improvement. Build times grew, dependency management became more intricate, and workflows needed optimization. Minor changes triggered full builds, affecting isolated development and CI pipelines.
Vercel的主网站，曾经是一个大型的Next.js应用程序，服务于我们的网站访客和登录的仪表板用户。但随着Vercel的成长，这种设置暴露了改进的机会。构建时间增加，依赖管理变得更加复杂，工作流程需要优化。小的更改会触发完整的构建，影响了独立开发和CI管道。
It was clear a change was needed.
显然需要进行改变。
By rethinking our architecture, we shifted to vertical microfrontends, leading to a simpler development experience and over a 40% improvement in preview build times and local development compilation. Streamlined dependencies by removing code for the other microfrontends also reduced page weight and boosted end-user performance, with gains in Core Web Vitals like Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).
通过重新思考我们的架构，我们转向了垂直微前端，从而简化了开发体验，并使预览构建时间和本地开发编译时间提高了 40% 以上。通过删除其他微前端的代码来简化依赖关系，还减少了页面重量并提升了最终用户性能，在 核心网络指标（如最大内容绘制时间（LCP）和下一次绘制交互时间（INP））方面取得了进展。
Building on Vercel's support for microfrontends, this overhaul improved the developer experience (DX) and highlighted areas for further optimization. Through dogfooding a large-scale app migration, our shift revealed new ways to streamline the platform for all users. While this blog shares our journey, it also shows where we can smooth the process for everyone. As we continue refining, we’re also making single applications build faster—enabling even greater DX without compromising end-user performance.
基于 Vercel 对微前端的支持，这次大修改善了开发者体验（DX）并突出了进一步优化的领域。通过在大型应用迁移中进行内部测试，我们的转变揭示了简化平台的新方法。虽然这篇博客分享了我们的旅程，但它也展示了我们可以为所有人简化流程的地方。随着我们不断改进，我们也在加快单个应用程序的构建速度——在不影响最终用户性能的情况下实现更大的开发者体验。
Let's look at how we did it.
让我们看看我们是如何做到的。