通过尤大“围绕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。

  2. React: 一个用于构建用户界面的 JavaScript 库,由 Facebook 开发,以其组件化和虚拟 DOM 而闻名。

  3. Vue.js: 一个渐进式 JavaScript 框架,用于构建用户界面和单页应用。

  4. oxc: 高性能 JavaScript/TypeScript 代码检查工具

  5. Svelte: 一个不同的构建 Web 应用的方法。它是一个编译器,将你的应用程序代码转换为高效的 JavaScript,而不是在运行时解释代码

  6. Nuxt: 基于 Vue.js 的 Web 全栈应用框架

  7. solidjs: 用于构建用户界面的声明性、高效且灵活的 JavaScript 库。

第二行

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

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

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

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

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

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

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

第三行

  1. pnpm: 一个快速、节省磁盘空间的包管理器,类似于 npm 或 Yarn,但它使用不同的依赖管理策略

  2. VitePress: 一个基于 Vite 构建的静态站点生成器,由 Vue.js 团队创建,特别适用于文档站点。

  3. unocss: 一个即时、按需的原子 CSS 引擎。

  4. Vitest: 一个由 Vite 驱动的极速单元测试框架。

  5. volar: 用于构建编程语言工具的框架

  6. tauri: 使用 rust 编写的构建轻量级、安全且高性能的跨平台桌面应用程序

  7. redwood: 一个全栈 JavaScript/TypeScript web 应用框架,旨在让开发者能够以更加集成和流畅的方式构建现代 web 应用

  8. 没找到,不知道有没有人知道是什么?

  9. Laravel: Laravel 是一个流行的 PHP Web 应用程序框架,虽然它主要用于后端,但它也可以与 Vite 集成,以处理前端资源。

  10. Vite Ruby : Ruby的Vite集成

  11. Remix: Remix 是一个全栈 Web 框架,专注于 Web 标准和现代 Web 应用 UX,构建更好的网站。

  12. Peaks: : Angular 的全栈元框架。由 Vite 和 Nitro 提供支持

  13. Million: 一种声明性的,基于HTML的语言,使构建Web应用程序变得有趣

  14. playwright: Web测试和自动化库

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

期待

他们打算交付的产品:

资源:

  1. 大会所有 PPT: github.com/d2forum/19t...
  2. 视频: www.bilibili.com/video/BV1WE...
相关推荐
烛阴几秒前
JavaScript 函数对象与 NFE:你必须知道的秘密武器!
前端·javascript
px52133442 分钟前
Solder leakage problems and improvement strategies in electronics manufacturing
java·前端·数据库·pcb工艺
eli9604 分钟前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
全宝20 分钟前
🔥一个有质感的拟态开关
前端·css·weui
老K(郭云开)24 分钟前
最新版Chrome浏览器加载ActiveX控件技术--allWebPlugin中间件一键部署浏览器扩展
前端·javascript·chrome·中间件·edge
老K(郭云开)26 分钟前
allWebPlugin中间件自动适应Web系统多层iframe嵌套
前端·javascript·chrome·中间件
银之夏雪1 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
还是鼠鼠1 小时前
Node.js 的模块作用域和 module 对象详细介绍
前端·javascript·vscode·node.js·web
拉不动的猪1 小时前
刷刷题36(uniapp高级实际项目问题-1)
前端·javascript·面试
-代号95271 小时前
【CSS】一、基础选择器
前端·css