通过尤雨溪“围绕Vite的前端统一框架”分享，看未来前端发展趋势

vite 历史

看 PPT 吧！

总结：Vite 当之无愧目前前端构建工具首选

Vite 现状

• 周下载量 2200 万 +，在 23年已经超过 Next.js
• State of JS 2024 ，Vite 和 Vitest 是最受关注和欢迎的工具

Vite 生态

在元框架中，除了 Next.js 都有在使用 Vite，毕竟人家现在有自己 turbopack。哈哈哈

让我们看看这些都是什么吧！ 第一行

1. Astro: 一个现代化的静态站点生成器，以其岛屿架构（Islands Architecture）而闻名，可以构建快速的网站，只加载必要的 JavaScript。
   • GitHub: https://github.com/withastro/astro
2. React: 一个用于构建用户界面的 JavaScript 库，由 Facebook 开发，以其组件化和虚拟 DOM 而闻名。
   • GitHub: https://github.com/facebook/react
3. Vue.js: 一个渐进式 JavaScript 框架，用于构建用户界面和单页应用。
   • GitHub:  https://github.com/vuejs/
4. oxc: 高性能 JavaScript/TypeScript 代码检查工具
   • GitHub:  https://github.com/oxc-project/oxc
5. Svelte: 一个不同的构建 Web 应用的方法。它是一个编译器，将你的应用程序代码转换为高效的 JavaScript，而不是在运行时解释代码
   • GitHub: https://github.com/sveltejs/svelte
6. Nuxt: 基于 Vue.js 的 Web 全栈应用框架
   • GitHub: https://github.com/nuxt/nuxt
7. solidjs: 用于构建用户界面的声明性、高效且灵活的 JavaScript 库。
   • GitHub: https://github.com/solidjs/solid

第二行

1. storybook: 用于独立构建、记录和测试 UI 组件的工具

   • GitHub:  https://github.com/storybookjs/storybook

2. qwik： 无需费力即可立即加载 Web 应用程序

   • **GitHub： https://github.com/QwikDev/qwik

3. Rollup:  一个 JavaScript 模块打包器，可以将多个模块打包成一个或多个 bundle。Vite 在开发环境使用原生 ESM，但在生产环境仍然依赖 Rollup 进行打包和优化。

   • GitHub:  https://github.com/rollup/rollup

4. Vite: 现代前端构建工具

   • GitHub:  https://github.com/vitejs/vite

5. rolldown: 基于 Rust 的 JavaScript 快速打包器

   • GitHub:  https://github.com/rolldown/rolldown

6. Angular  Angular 是一个基于 TypeScript 的开源 Web 应用框架, 由 Google 的 Angular 团队以及社区共同领导和维护。

   • GitHub:  https://github.com/angular/angular

7. Nx: 一个智能的、可扩展的构建系统，特别适用于 monorepo 项目。

   • GitHub:  https://github.com/nrwl/nx

第三行

1. pnpm: 一个快速、节省磁盘空间的包管理器，类似于 npm 或 Yarn，但它使用不同的依赖管理策略
   • GitHub:  https://github.com/pnpm/pnpm
2. VitePress: 一个基于 Vite 构建的静态站点生成器，由 Vue.js 团队创建，特别适用于文档站点。
   • GitHub:  https://github.com/vuejs/vitepress
3. unocss: 一个即时、按需的原子 CSS 引擎。
   • GitHub: https://github.com/unocss/unocss
4. Vitest: 一个由 Vite 驱动的极速单元测试框架。
   • GitHub: https://github.com/vitest-dev/vitest
5. volar: 用于构建编程语言工具的框架
   • GitHub: https://github.com/volarjs/volar.js
6. tauri: 使用 rust 编写的构建轻量级、安全且高性能的跨平台桌面应用程序
   • GitHub:  https://github.com/tauri-apps/tauri
7. redwood: 一个全栈 JavaScript/TypeScript web 应用框架，旨在让开发者能够以更加集成和流畅的方式构建现代 web 应用
   • GitHub: https://github.com/redwoodjs/redwood

第四行

8. 没找到，不知道有没有人知道是什么？
9. Laravel: Laravel 是一个流行的 PHP Web 应用程序框架，虽然它主要用于后端，但它也可以与 Vite 集成，以处理前端资源。
   • GitHub:  https://github.com/laravel/larave
10. Vite Ruby : Ruby的Vite集成
    • GitHub:  https://github.com/ElMassimo/vite_ruby
11. Remix: Remix 是一个全栈 Web 框架，专注于 Web 标准和现代 Web 应用 UX，构建更好的网站。
    • GitHub: https://github.com/remix-run/remix
12. Peaks: : Angular 的全栈元框架。由 Vite 和 Nitro 提供支持
    • GitHub: https://github.com/analogjs/analog
13. Million: 一种声明性的，基于HTML的语言，使构建Web应用程序变得有趣 * **GitHub: https://github.com/marko-js/marko
14. playwright: Web测试和自动化库
    • GitHub:  https://github.com/microsoft/playwright

Vite 恐怖的统治力！

使用 Vite 的公司

Vite 的缺点

依赖多个职责重复的第三方库

• esbuild：预打包、TS/ JSX 转译、压缩 （GO）
• Rollup：插件生态、生产环境构建、拆包/产物优化 (TS)
• SWC：React HMR 、转译、压缩(Rust) 这些每一个都负责一部分，但是都有自己的缺点，但是他们功能也有重复的地方

Unbundled ESM 在请求数量巨大时存在性能瓶颈

什么是 Unbundled ESM？ Unbundled ESM（未打包的 ECMAScript 模块）是指直接使用原生 ES 模块系统而不将它们合并（打包）成单个文件的开发和部署方式

Rolldown

要解决的问题

• 兼容 Rollup 的插件 API 和生态
• Rust 提升生成构建性能
• 添加高阶功能
• Full bundle mode 解决Vite unbundled ESM 的性能瓶颈

下面是 js 工具链生态，尤大整理 前端搭建大型项目头疼的问题：

Rust for JS

尤大的公司官网： https://voidzero.dev/

目的：打造完整的高性能的 JS 工具链

为什么是 Rust？

OXC 各项都是极致的性能

目前在做的： Vite 整合，目前没有通过 Astro 测试 Vite full bundle mode，HMR 和增量打包构建

rolldown 数据：

听不懂：

Vite Next

期待

他们打算交付的产品：

资源：

1. 大会所有 PPT： https://github.com/d2forum/19th
2. 视频： https://www.bilibili.com/video/BV1WERGYDEix

---

此文自动发布于：github issues