vite 历史
看 PPT 吧!
总结:Vite 当之无愧目前前端构建工具首选
Vite 现状
- 周下载量 2200 万 +,在 23年已经超过 Next.js
- State of JS 2024 ,Vite 和 Vitest 是最受关注和欢迎的工具
Vite 生态
在元框架中,除了 Next.js 都有在使用 Vite,毕竟人家现在有自己 turbopack。哈哈哈
让我们看看这些都是什么吧! 第一行
-
Astro: 一个现代化的静态站点生成器,以其岛屿架构(Islands Architecture)而闻名,可以构建快速的网站,只加载必要的 JavaScript。
- GitHub: github.com/withastro/a...
-
React: 一个用于构建用户界面的 JavaScript 库,由 Facebook 开发,以其组件化和虚拟 DOM 而闻名。
- GitHub: github.com/facebook/re...
-
Vue.js: 一个渐进式 JavaScript 框架,用于构建用户界面和单页应用。
- GitHub: github.com/vuejs/
-
oxc: 高性能 JavaScript/TypeScript 代码检查工具
- GitHub: github.com/oxc-project...
-
Svelte: 一个不同的构建 Web 应用的方法。它是一个编译器,将你的应用程序代码转换为高效的 JavaScript,而不是在运行时解释代码
- GitHub: github.com/sveltejs/sv...
-
Nuxt: 基于 Vue.js 的 Web 全栈应用框架
- GitHub: github.com/nuxt/nuxt
-
solidjs: 用于构建用户界面的声明性、高效且灵活的 JavaScript 库。
- GitHub: github.com/solidjs/sol...
第二行
-
storybook: 用于独立构建、记录和测试 UI 组件的工具
- GitHub: github.com/storybookjs...
-
qwik: 无需费力即可立即加载 Web 应用程序
- **GitHub: github.com/QwikDev/qwi...
-
Rollup: 一个 JavaScript 模块打包器,可以将多个模块打包成一个或多个 bundle。Vite 在开发环境使用原生 ESM,但在生产环境仍然依赖 Rollup 进行打包和优化。
- GitHub: github.com/rollup/roll...
-
Vite: 现代前端构建工具
- GitHub: github.com/vitejs/vite
-
rolldown: 基于 Rust 的 JavaScript 快速打包器
- GitHub: github.com/rolldown/ro...
-
Angular Angular 是一个基于 TypeScript 的开源 Web 应用框架, 由 Google 的 Angular 团队以及社区共同领导和维护。
- GitHub: github.com/angular/ang...
-
Nx: 一个智能的、可扩展的构建系统,特别适用于 monorepo 项目。
- GitHub: github.com/nrwl/nx
第三行
-
pnpm: 一个快速、节省磁盘空间的包管理器,类似于 npm 或 Yarn,但它使用不同的依赖管理策略
- GitHub: github.com/pnpm/pnpm
-
VitePress: 一个基于 Vite 构建的静态站点生成器,由 Vue.js 团队创建,特别适用于文档站点。
- GitHub: github.com/vuejs/vitep...
-
unocss: 一个即时、按需的原子 CSS 引擎。
- GitHub: github.com/unocss/unoc...
-
Vitest: 一个由 Vite 驱动的极速单元测试框架。
- GitHub: github.com/vitest-dev/...
-
volar: 用于构建编程语言工具的框架
- GitHub: github.com/volarjs/vol...
-
tauri: 使用 rust 编写的构建轻量级、安全且高性能的跨平台桌面应用程序
- GitHub: github.com/tauri-apps/...
-
redwood: 一个全栈 JavaScript/TypeScript web 应用框架,旨在让开发者能够以更加集成和流畅的方式构建现代 web 应用
- GitHub: github.com/redwoodjs/r... 第四行
-
没找到,不知道有没有人知道是什么?
-
Laravel: Laravel 是一个流行的 PHP Web 应用程序框架,虽然它主要用于后端,但它也可以与 Vite 集成,以处理前端资源。
- GitHub: github.com/laravel/lar...
-
Vite Ruby : Ruby的Vite集成
- GitHub: github.com/ElMassimo/v...
-
Remix: Remix 是一个全栈 Web 框架,专注于 Web 标准和现代 Web 应用 UX,构建更好的网站。
- GitHub: github.com/remix-run/r...
-
Peaks: : Angular 的全栈元框架。由 Vite 和 Nitro 提供支持
- GitHub: github.com/analogjs/an...
-
Million: 一种声明性的,基于HTML的语言,使构建Web应用程序变得有趣
- **GitHub: github.com/marko-js/ma...
-
playwright: Web测试和自动化库
- GitHub: github.com/microsoft/p...
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
尤大的公司官网: voidzero.dev/
目的:打造完整的高性能的 JS 工具链
为什么是 Rust?
OXC 各项都是极致的性能
目前在做的: Vite 整合,目前没有通过 Astro 测试 Vite full bundle mode,HMR 和增量打包构建
rolldown 数据:
听不懂:
Vite Next
期待
他们打算交付的产品:
资源:
- 大会所有 PPT: github.com/d2forum/19t...
- 视频: www.bilibili.com/video/BV1WE...