分类: 前端

  • TypeScript原生版来了!Go语言重构,性能提升10倍

    TypeScript原生版来了!Go语言重构,性能提升10倍

    微软近日发布了 TypeScript 原生预览版。这个版本用 Go 语言重新写了编译器。性能提升了 10 倍!

    这不是简单的优化。这是一次彻底的重构。微软团队把整个 TypeScript 编译器都用 Go 重写了。

    什么是 TypeScript 原生版?

    TypeScript 原生版是微软的新项目。他们把原来用 JavaScript 写的编译器,改成了用 Go 语言写。

    为什么要这么做?原因很简单:

    • 速度更快:Go 是编译型语言,运行速度比 JavaScript 快很多
    • 并行处理:Go 天生支持并发,可以同时处理多个任务
    • 内存共享:新版本可以更好地利用内存

    结果就是:编译速度提升了 10 倍!

    性能到底有多强?

    微软用 Sentry 项目做了测试。这个项目有 9000 多个文件,100 多万行 TypeScript 代码。

    原版 TypeScript 5.8

    • 编译时间:72.81 秒
    • 内存使用:3.3GB

    新版 TypeScript 原生版

    • 编译时间:约 7 秒
    • 内存使用:3.9GB

    你没看错,从 72 秒到 7 秒!这就是 10 倍的性能提升。

    对于大型项目来说,这个改进太重要了。以前编译一次要等一分多钟,现在只要几秒钟。

    如何使用?

    安装编译器

    现在就可以试用了。在你的项目里运行:

    npm install -D @typescript/native-preview

    然后用 tsgo 命令代替 tsc

    npx tsgo --project ./src/tsconfig.json

    VS Code 扩展

    微软还发布了 VS Code 扩展。你可以在扩展市场搜索 “TypeScript (Native Preview)”。

    安装后需要手动开启:

    1. 打开命令面板
    2. 运行 “TypeScript Native Preview: Enable (Experimental)”

    或者在设置里开启:

    "typescript.experimental.useTsgo"true

    新功能支持

    SX 支持

    最新版本已经支持 JSX 了。React 开发者可以放心使用。

    JavaScript 支持

    TypeScript 原生版也支持检查 JavaScript 文件。它会读取 JSDoc 注释来做类型检查。

    编辑器功能

    目前支持的功能:

    • ✅ 错误检查
    • ✅ 跳转定义
    • ✅ 悬停提示
    • ✅ 代码补全
    • ❌ 自动导入(开发中)
    • ❌ 查找引用(开发中)
    • ❌ 重命名(开发中)

    注意事项

    这还是预览版,有一些限制:

    模块解析

    如果你用的是老的模块解析方式,可能会遇到错误。建议改成:

    {
        "compilerOptions": {
            "module": "preserve",
            "moduleResolution": "bundler"
        }
    }

    或者:

    {
        "compilerOptions": {
            "module": "nodenext"
        }
    }

    暂不支持的功能

    • --build 模式
    • --declaration 生成声明文件
    • 一些老的编译目标

    技术细节

    为什么选择 Go?

    微软选择 Go 语言有几个原因:

    1. 性能好:Go 是编译型语言,运行速度快
    2. 并发强:Go 的 goroutine 让并行处理变得简单
    3. 内存安全:Go 有垃圾回收,不容易出现内存问题
    4. 生态好:Go 有很多成熟的工具和库

    架构改进

    新版本不只是换了语言。微软还重新设计了架构:

    • 并行解析:可以同时解析多个文件
    • 增量编译:只重新编译改动的部分
    • 内存优化:更好的内存管理

    API 兼容性

    微软知道很多工具依赖 TypeScript API。所以他们开发了兼容层。

    新版本提供了 IPC 接口。其他工具可以通过进程间通信来使用 TypeScript。

    他们还用 Rust 写了一个 Node.js 模块,让 JavaScript 代码可以同步调用新的编译器。

    对开发者的影响

    大型项目的福音

    如果你的项目很大,编译时间很长,这个更新对你来说是巨大的好消息。

    想象一下:

    • 以前编译要等 2 分钟,现在只要 10 秒
    • 以前保存文件后要等很久才能看到错误,现在几乎是实时的
    • CI/CD 流水线会快很多

    开发体验提升

    更快的编译意味着:

    • 更快的热重载
    • 更快的错误反馈
    • 更流畅的开发体验

    对工具链的影响

    很多工具都依赖 TypeScript:

    • Webpack
    • Vite
    • ESLint
    • Prettier

    这些工具都会从性能提升中受益。

    未来规划

    微软的计划是:

    1. 2025 年内:完善所有主要功能
    2. TypeScript 7.0:正式版本会包含原生编译器
    3. 逐步迁移:最终 tsgo 会变成 tsc

    开发路线图

    短期目标:

    • 完善 --build 模式
    • 支持声明文件生成
    • 完善编辑器功能

    长期目标:

    • 完全替代现有编译器
    • 保持 API 兼容性
    • 提供迁移工具

    社区反应

    开发者们对这个消息很兴奋:

    “终于不用等编译了!”

    “10 倍性能提升,这太疯狂了!”

    “大型项目的救星!”

    当然也有一些担心:

    • API 兼容性问题
    • 生态系统适配
    • 学习成本

    但总体来说,社区反应很积极。

    总结

    TypeScript 原生版是一个重大突破。10 倍的性能提升不是小改进,而是质的飞跃。

    虽然还是预览版,但已经可以在很多项目中使用了。如果你的项目编译慢,强烈建议试试。

    这个改进对整个前端生态都有积极影响。它证明了:

    • 性能优化还有很大空间
    • 选择合适的技术栈很重要
    • 大公司愿意投入资源做基础设施

    未来几个月,我们会看到更多功能完善。到 TypeScript 7.0 正式发布时,这将成为所有 TypeScript 开发者的标配。

    前端开发的新时代来了!

    参考资料:

    • Microsoft DevBlogs – Announcing TypeScript Native Previews

    文章来源: 公众号Nodejs技术栈

  • Vue3 官方宣布淘汰 Axios,拥抱新趋势

    Vue3 官方宣布淘汰 Axios,拥抱新趋势

    过去十年,Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持,成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级,Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场

    Axios的四大时代痛点

    1. 冗余的适配逻辑

    // Axios的通用配置(但实际你可能只用浏览器端)
    axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })

    2. 弱TypeScript支持

    // Axios需要手动定义响应类型
    interface Response<T> { data: T }
    axios.get<Response<User>>('/api/user'// 仍需手动解构data

    3. 过度封装的反模式

    // 层层拦截器叠加导致调试困难
    axios.interceptors.request.use(config => {
      // 权限校验拦截器
    })
    axios.interceptors.response.use(response => {
      // 全局错误处理拦截器
    })

    4. 生态割裂

    需要额外引入第三方库实现缓存、队列等高级功能,增加维护成本

    Alova.js 的核心优势

    1. 极致的轻量与性能

    • Tree-shaking优化:仅打包使用到的功能模块
    • 零依赖:基础包仅 4KB(Axios 12KB)

    2. 智能请求管理(开箱即用)

    // 一个配置实现请求竞态取消+重复请求合并+错误重试
    const { data } = useRequest(userInfoAPI, {
      abortOnUnmount: true,    // 组件卸载自动取消请求
      dedupe: true,            // 自动合并重复请求
      retry: 3                 // 自动重试3次
    })

    3. 声明式编程范式

    与 React/Vue 深度集成,提供Hooks风格API:

    // Vue3示例:自动管理loading/error状态
    const { 
      data, 
      loading, 
      error, 
      send: fetchUser 
    } = useRequest(() => userAPI.get({ id: 1 }))

    4. 多场景解决方案内置

    • SSR友好:服务端渲染直出数据
    • 文件分片上传:内置进度监听和暂停恢复
    • 数据缓存:支持内存/SessionStorage多级缓存策略

    实战迁移指南

    1. 基础请求改造

    Axios:

    axios.get('/api/user', { params: { id: 1 } })
      .then(res => console.log(res.data))

    Alova:

    // 定义API模块(享受类型提示)
    const userAPI = {
      get: (id) => alova.Get('/api/user', { params: { id } })
    }
    
    // 发起请求(自动推导user类型!)
    const { data: user } = useRequest(userAPI.get(1))

    2. 复杂拦截器迁移

    Axios的混乱拦截:

    // 请求拦截
    axios.interceptors.request.use(config => {
      config.headers.token = localStorage.getItem('token')
      return config
    })
    
    // 响应拦截
    axios.interceptors.response.use(
      response => response.data,
      error => Promise.reject(error.response)
    )

    Alova的优雅中间件:

    // 全局统一逻辑(类型安全!)
    const alova = createAlova({
      beforeRequest: (method) => {
        method.config.headers.token = localStorage.getItem('token')
      },
      responded: (response) => response.json() // 自动解析JSON
    })

    迁移成本高?Alova给你保底方案

    // 兼容模式:在Alova中使用Axios适配器
    import { axiosAdapter } from '@alova/adapter-axios'
    
    const alova = createAlova({
      requestAdapter: axiosAdapter(axios)
    })
  • 现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    成为一个现代的 React 开发者,不仅需要理解 React 的核心概念,还需要对整个 React 生态系统了如指掌。所以今天和大家来分享一下这篇 13 Must Know Libraries for a React Developer,看看正在使用 React 开发的你,是不是都使用过这些流行的库了?~

    学习常用的库相关的知识,可以大大简化你的开发过程。

    即使你没有具体用过,你也至少应该知道它们的存在以及它们解决的问题。

    这里列出了作为 React 开发者应该了解的 13 个优秀的 React 库。

    1. TanStack Query

    TanStack Query

    TanStack Query是 React 中的一个开源数据 Fetch 库,由Tanner Linsley开发。它在NPM上有 170 多万次周下载量,在GitHub上有 3.5 万+stars(2023 年 8 月数据)。

    React 没有官方的数据 Fetch 方式。开发者可以自由创造各种数据 Fetch 方法。大多数时候,都会用到 useEffect 和 useState 钩子,或者一些通用的状态管理库。

    TanStack Query 为我们在 React 应用程序中提供了一种标准的获取数据的方式,并帮助我们避免编写复杂的逻辑,减少代码行数,使我们的代码更易维护,使我们的应用程序更快。

    它有很多神奇的特性,可以让 React 中的数据 Fetch 和开发体验很丝滑。这些功能包括自动缓存、自动重新 Fetch、滚动恢复、Render-as-you-fetch 等。

    2. Redux

    Redux

    Redux是 JavaScript 中的一个开源状态管理库。它在 GitHub 上有超过 58K stars,在 NPM 上有超过 780 万次周下载量(2023 年 8 月数据)。

    根据 Redux 的官方文档,Redux 是一个可预测的 JavaScript 应用程序状态容器。它可以帮助你编写在不同环境(客户端、服务器和原生应用程序)下表现一致、可运行的应用程序,并且这些应用程序很容易测试。不仅如此,它还提供了非常好的开发体验,比如与时间穿梭调试器相结合的实时代码编辑。(来源: Redux)

    Redux 的特性

    • 可预测的 – 帮助你编写在不同环境下表现一致、易于测试的应用程序。
    • 集中式的 – 帮助你集中管理应用程序状态。
    • 可调试的 – 有自己的 DevTools,可以轻松跟踪应用程序状态的时间线。
    • 灵活的 – Redux 可与任何 UI 层一起使用,并且有大量的插件来满足你的需求。(来源: Redux)

    Redux 是 React 中最受欢迎的状态管理库之一,可以帮你更轻松地构建大规模的工业级应用程序。

    3. MUI

    MUI

    MUI Core 是一个 React 样式库,可以帮助你很快构建漂亮的 UI。 MUI Core 包含 4 个用于更快构建和交付 UI 的基础库:

    • Material UI: Material UI 是一个实现了 Google Material Design 的 React UI 组件库。(来源: Material UI)
    • Joy UI: Joy UI 是一个使用 React 构建的漂亮设计的 UI 组件库,旨在为开发过程带来乐趣。(来源: Joy UI)
    • Base UI: MUI Base 是一个 headless(“unstyled”)React UI 组件和底层钩子的库。(来源: Base UI)
    • MUI System: MUI System 是一组 CSS 实用程序的集合,用于使用 MUI 组件库快速布局自定义设计。 (来源: MUI System)

    凭借在GitHub上的 88K stars(2023 年 8 月数据)和每周NPM上的 290 万次下载量(2023 年 8 月数据),MUI 是世界上最受欢迎的 React UI 库之一。

    4. React Bootstrap

    React Bootstrap

    React Bootstrap 是我们老朋友 Bootstrap 在 React 中的重构版本。它是一个独立的 Bootstrap 组件的 UI 库,不依赖于 bootstrap.js 或 jQuery。

    React Bootstrap 提供了一个组件库,这些组件具有易于使用的功能、状态管理和默认可访问性,使其成为开始构建应用程序 UI 的不错选择。

    它在GitHub上有超过 21K stars,在NPM上有超过 240 万次周下载量(2023 年 8 月数据)。

    5. React DND

    React DND

    现代 React 应用程序很少简单。几乎所有的工业级应用程序都有某种形式的拖放功能。

    React DND是一个帮助你构建基于拖放功能的 React 应用程序的库。为此,它使用了HTML5 拖放 API。

    这个库使用起来相当简单,在实际应用中有许多有趣和创新的用例。它在GitHub上拥有超过 19K stars,在NPM上拥有超过 180 万次周下载量(2023 年 8 月数据)。

    6. SWR

    SWR

    Vercel 的SWR是我们列表中的第二个数据 Fetch 库,是 React Query 之外的又一个不错的选择。

    SWR 库比 React Query 小得多,更简单,但提供了许多神奇的功能,如可重用的数据 Fetch、Suspense、分页、内置缓存等等。

    它在GitHub上拥有超过 27K stars,在NPM上拥有超过 120 万次周下载量(2023 年 8 月数据)。

    7. React Hook Form

    React Hook Form

    当涉及到 React 中的表单构建时,React Hook Form是王者。它是一个高性能的、轻量的库。没有任何依赖,可以通过减少代码、隔离重新渲染、更快的挂载等来提高应用程序性能。

    根据 React Hook Form 的 GitHub Readme,它具有以下特性:

    • 考虑了性能、用户体验和开发者体验而构建
    • 采用原生 HTML 表单验证
    • 与 UI 库无缝集成
    • 小巧轻量,无任何依赖
    • 支持 Yup、Zod、Superstruct、Joi、Vest、class-validator、io-ts、nope 等验证库以及自定义验证

    该项目在GitHub上拥有超过 36K stars,在NPM上拥有超过 340 万次周下载量(2023 年 8 月数据)。在下次用 React 构建表单之前,一定要看看这个库。

    8. Recharts

    Recharts

    Recharts是一个使用 React 和 D3 构建的开源图表库。它轻量、基于 React 组件、支持原生 SVG,并且可以轻松地在 React 应用里添加图表。

    它提供了 11 种内置的图表组件,包括 AreaChart、BarChart、LineChart、PieChart 等。

    这个库在GitHub上拥有超过 20K stars,在NPM上拥有超过 130 万次周下载量(2023 年 8 月数据)。

    9. React Router

    React Router

    React Router是在 React 应用中实现路由的最流行的库。它在GitHub上拥有超过 50K stars,在NPM上拥有超过 1000 万次周下载量,且由同一团队开发,也是流行的 React 框架 Remix 背后的团队。

    它是一个轻量级、功能齐全的 React 路由库。React Router 可在 React 支持的任何地方运行;在 Web 上、服务器上(使用 node.js)和在 React Native 上。(来源: React Router GitHub)

    React Router 被许多顶尖公司的开发团队使用,如微软、Netflix、Twitter、Discord 等。

    10. Blueprint

    BluePrint

    Blueprint是一个基于 React 的 Web UI 工具包。它针对构建在现代浏览器(包括 IE11)中运行的复杂、数据密集型桌面应用进行了优化。(来源: Blueprint GitHub)

    Blueprint 有 7 个不同的 npm 软件包:

    • blueprintjs/core – 核心包,包含 30 多个组件,用于处理应用的基本 UI。
    • blueprintjs/datetime – 帮助在 React 中与日期和时间进行交互。
    • blueprintjs/icons – 提供超过 300 个图标。
    • blueprintjs/popover2 – blueprintjs/core 的 Popover 和 Tooltip 组件的继承组件。
    • blueprintjs/select – 在应用中支持单选或多选的 Select 组件。
    • blueprintjs/table – 交互式表格组件。
    • blueprintjs/timezone – 帮助应用处理不同时区。

    Blueprint 在GitHub上拥有超过 20K stars(2023 年 8 月数据)。

    11. React Virtualized

    React Virtualized

    React Virtualized是一个虚拟列表库,帮助你在 React 中高效处理大型列表和表格数据的库。它在GitHub上拥有超过 25K stars,在NPM上拥有超过 250 万次周下载量(2023 年 8 月数据)。

    如果你的应用中使用了大量数据,这个库将非常有用。

    12. React Suite

    React Suite

    React Suite是一个企业系统产品的 React 组件库集合。这是一个设计缜密并且对开发者友好的 UI 框架。(来源: React Suite GitHub)

    这是一个与众不同的 UI 库。每个组件都经过精心设计,可以极大地提升应用的美观度,赋予它卓越的质感。

    这个库提供了通用的 UI 组件,如 Button、Drawer、Pagination、Loader 等,设计和深度都比大多数 UI 组件库要出色得多。

    它在GitHub上拥有超过 7K stars,在NPM上拥有超过 6 万次周下载量(2023 年 8 月数据)。

    13. TailwindCSS

    Tailwind CSS

    TailwindCSS是一个工具类优先的 CSS 框架,用于快速设计网站样式。它不是一个 React 库,而是一个 CSS 样式框架,在 React 开发者中用于样式化应用程序的最受欢迎选项之一。

    通过flexpt-4text-center等实用程序类,Tailwind 可以非常容易地构建 UI。每个类在赋值给特定的 JSX 元素后会激活预定义的 CSS 值。

    例如,如果将flextext-center 的类名分配给 div,该元素将变成一个弹性元素、文字居中对齐。

    它在GitHub上拥有超过 71K stars,在NPM上拥有超过 600 万次周下载量(2023 年 8 月数据)。

    总结

    不用学习所有这些库,才能在 React 中高效工作。因为其中的一些目的是相同的。例如,MUI、React Bootstrap 和 React Suite 都是 UI 组件库。

    将时间花在学习不同目的的库上。例如,构建一个使用 React Suite 的 UI、React Router 的路由、React Query 获取数据和 Recharts 渲染图表的 React 应用程序,这样才能最大化的提高学习效率。


    来源:稀土掘金

  • 尤雨溪成立VoidZero,Rust要一统JavaScript工具链?

    尤雨溪成立VoidZero,Rust要一统JavaScript工具链?

    尤雨溪在Vite Conf 2024上宣布成立公司Void Zero,目前已经完成$460万种子轮融资,由Accel领头,并且有Amplify以及在dev tools领域有丰富经验的创始人参与。 主要目标是搭建下一代JavaScript工具链,实现一套工具覆盖从源码到最终产物的中间过程,例如semantic analysis、transformer、linter、formatter、minifier、boundler等。

    image.png

    好的工具链不外乎好用, 本文将结合尤雨溪在Vite Conf 2024上分享的内容来介绍什么是下一代JavaScript工具链, 以及好用体现在哪些方面, 最后再上手试验下相关工具看是否真的

    Vite工具现状

    相信现在大多数前端开发人员的构建工具首选一定是Vite,Vite确实易上手并且快,涵盖了Vue、React、Preact等主流前端框架,也支持TypeScript、Nuxt等。Vite仅需简单的几个指令即可运行起项目:

    // 运行create指令,选择前端框架和语言,例如Vue、TypeScript
    npm create vite@latest
    
    // Done. Now run:
      
    cd vite-project
    npm install
    npm run dev

    Vite为什么快?

    有对比才能体现快,几年前构建前端项目还是使用webpack、Rollup、Parcel等工具,当项目代码指数级增长,这些工具的性能瓶颈愈发明显,动不动需要几分钟才能启动dev server,即使是模块热更新(HMR),文件修改后也需要几秒钟才能反馈到浏览器,这严重影响开发者工作幸福指数

    浏览器的快速发展造就了Vite,Vite的优势在两个方面:首先是支持了Native ES Modules,其次是build过程接入了编译型语言(如go、rust)开发的工具。这些优势体现在服务器启动和热更新两个阶段:

    • 服务器启动: Vite将应用中的模块区分为依赖、源码两种,改进了开发服务器启动时间。
      • 依赖:开发时不会变动的纯JavaScript,或者是较大的依赖(上百个模块的组件库),这些代码的处理代价比较高,Vite会使用esbuild预构建这些依赖,由于esbuild使用Go编写,因此比以JavaScript编写的打包器预构建快10-100倍。
      • 源码:对于Vue、JSX等频繁变动的代码文件,Vite以原生ESM方式提供源码,让浏览器接管了打包程序的部分工作,Vite只需要在浏览器请求源码时进行转换并安需提供,也就是需安需导入、安需加载。
      image.png
    • 热更新(HMR) 在Vite中,HMR是在原生ESM上执行的。当编辑一个文件时,Vite只需要精确地使已编辑Module与其最近的HMR边界之间的链失活,使得无论应用大小如何,HMR能保持快速更新。 Vite同时利用HTTP头来加速整个页面的重新加载:源码模块请求根据304 Not Modified协商缓存,而预构建的依赖模块请求则通过Cache-Control:max-age=31536000,immutable进行强缓存,因此一旦被缓存将不需要再次请求。

    Vite也有缺陷

    image.png

    Vite当前架构底层依赖于esbuildRollupSWC,三者的作用如下:

    • esbuild: Vite使用esbuild执行依赖项预构建,转化TypeScript、JSX,并且作为生成环境构建的默认minifier。
    • Rollup: Rollup直接基于ES6模块格式,因此能够实现除屑优化(Tree Shaking),然后基于插件生态来支持打包过程的扩展。Vite基于Rollup的插件模板实现插件生态,构建生产环境的bundling chunk和静态资源。
    • SWC: SWC使用Rust语言实现,号称super-fastJavaScript编译器,能够将TypeScript、JSX编译为浏览器支持的JavaScript,编译速度比babel快20倍。Vite主要使用SWC来打包React代码以及实现React代码的HMR。

    Vite充分利用esbuild、Rollup、SWC各自的优势来组合成一套打包工具链,虽然对使用者来说是无感的,但对于Vite内部,三套打包框架组合在一起本身就显得比较臃肿。

    接下来我们就分析下这一套组合拳会有哪些缺陷:

    • 两套bundling 虽然esbuild构建非常快,但它的tree shaking以及代码切分不像rollup的配置化那样灵活,插件系统设计的也不尽如人意,因此Vite仅在DEV环境使用esbuild预构建依赖项。rollup正好拟补了ebuild的缺点,比较好的chunck control,以及易配置的tree shaking,因此适合在生成环境打包代码。
    • 生产环境构建速度慢 由于Rollup基于JavaScript实现,虽然比Webpack快很多,但相比于native工具链,速度就相形见绌了。
    • 比较大的二进制包 SWC的二进制包有多大?在Mac系统下,达到37MB,比Vite和其依赖项文件总和大了2倍。
    • SWC虽然快,但缺少bundler能力 SWC有比较完善的transform和minifier,但没有提供可用的bundler,这也就说明了SWC不能直接作为打包工具。
    • 不一致的bundler行为 DEV环境使用esbuild预构建依赖项,而PROD环境使用rollup构建包,在包含ESM、CJS多模块形式场景下,esbuild和rullup的构建行为存在差异,导致一些仅在线上出现的问题。
    • 低效率的构建管道 由于混合了JavaScript、Go、Rust三种程序,同一代码片段可能会在不同进程重复执行AST、transform、serialize,并将结果在不同进程间传递。另一方面,在进程间传递大量的代码块本身也会有比较大的开销,特别是传递source map此类文件时开销更大。

    总结这些问题,就三点:碎片化、不兼容、低效率。 为了解决这些种种问题,统一的打包工具迫在眉睫,这也是尤雨溪提出Rolldown的主要原因。

    image.png

    基于Rust的下一代工具链

    image.png

    VoidZero提出的下一代工具链是什么?下图为 VoieZero规划蓝图,不管是Vue、React、Nuxt还是其他前端框架,一个Vite统统给你搞定,测试框架仅需Vitest即可。Vite底层依赖Rolldown打包器,而打包过程完全交由工具链Oxc负责。实际干活的RolldownOxc都基于Rust实现,因此够快。

    image.png

    OxcRolldown离正式使用还有一段距离,预计是2025年初投入使用,但这也不妨碍我们先了解下这两个工具让人惊掉下巴的牛,毕竟值460万美金。

    Oxc

    Oxc作为统一的语言工具链,将提供包含代码检查Linter、代码格式化Formatter、代码打包的组合式NPM包或者Rust包。代码打包过程分为TransformerMinifierResolverParserSemantic Analysis

    Oxc官网地址: oxc.rs/ , 目前已经发布了oxlint v0.9.9oxc-transform alpha 版本

    • oxlint v0.9.9检查速度比eslint快50-100倍。oxlint已经在Shopify投入使用,之前使用eslint检查代码需要75分钟/CI,而使用oxlint仅需要10秒钟,你就说快吧!
    • oxc-transform alpha转换速度是SWC的3到5倍, 并且内存占用减少20%, 更小的包体积(2MB vs SWC的37MB). 已实现的主要3个功能:
      • 转换TypeScript至ESNext;
      • 转换React JSX至ESNext,并支持React Refresh;
      • TypeScript DTS 声明;

    Oxc目前已完成Parser Linter Resolver,正在快马加鞭地完善Transformer

    image.png

    Rolldown

    Rolldown是基于Rust实现的JavaScript快速打包器,与Rollup API兼容。作为打包器应包含的功能有:

    • Bundling:
      • 阶段1:使用Rolldown替换esbuild,执行依赖项预生成,主要包括多entry的代码切分、cjs/esm混合打包、基础插件支持;
      • 阶段2:Rolldown能够支持生成环境构建,包括命令行和配置文件支持、Treeshaking、Source map、Rollup插件兼容等;
    • Transform: 使用oxc代替esbuild的Transform,尽可能使用同一套AST。核心功能模块Typescript/JSX转换、代码缩减(minification)以及语法降级;
    • 与Vite深度集成: 替换esbuild和rollup,Vite内部核心插件使用Rust实现,提升构建效率。
    image.png

    Rolldown在性能方面表现如何?官方给出了两个测试。

    测试一:打包数量为19k的模块文件,其中10k为React JSX组件,9k为图标js文件。不同打包框架的耗时如下:

    • rolldown: 0.63s
    • rolldown-vite: 1.49s
    • esbuild: 1.23s
    • fram: 2.08s
    • rsbuild: 3.14s

    rolldown打包速度比esbuild快了近2倍。

    测试二:打包Vue Core代码,基于TypeScript的多包仓库,包含11个包/62个dist bundles,耗时如下:

    Vue版本构建框架构建耗时
    Vue3.2Rollup + rullup-plugin-typescript2+ terser tsx114s
    Vue3.5(main branch)Rollup + rollup-plugin-esbuild + swc minify tsc8.5s
    Vue3.5(rolldown branch)Rolldown(tranform+minify) + oxc-transform1.11s

    基于rolldown的Vue3.5源代码比Rollup构建快了近8倍。

    单从测试数据来看,基于Rust开发的rolldown,打包速度确实带来惊人的提升。以下为下一代Vite的架构概览,预计2025年初发布。

    image.png

    总结

    VoidZero宣称的下一代JavaScript工具链,价值460万美金,其商业价值可见一斑,对于研发个体来说没有明显的感受,但对于大型企业来说,VoidZero能实打实的为企业节省每年几百万的CI构建成本。

    VoidZero将清一色的使用Rust来搭建底层构建逻辑,如果能够成型,也证明了Rust在前端构建领域的地位。这也让我们反思,借助于Rust独特的性能和安全性优势,它还能够为前端带来哪些价值?例如WASM支持,基于Tauri、Electon.rs框架的桌面应用,支持Flutter和Dart语言的移动端应用。

    究竟VoidZero会为前端领域带来怎样的变革,Vite能不能一统JavaScript工具链,让我们拭目以待吧。

    作者:前端下饭菜
    链接:https://juejin.cn/post/7422404598360948748
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • Vite 6.0 发布了!(2024年11月26日)

    Vite 6.0 发布了!(2024年11月26日)

    Vite 6 Announcement Cover Image

    今天,Vite 迎来了发展历程中的重要里程碑。我们很高兴地宣布,Vite 6 正式发布了!这一重大版本的发布离不开 Vite 团队贡献者 以及整个生态系统合作伙伴的共同努力。

    过去一年中,Vite 的采用率持续增长,自 Vite 5 发布以来,npm 每周下载量从 750 万次跃升至 1700 万次。Vitest 不仅越来越受用户欢迎,还开始形成自己的生态系统。例如,Storybook 推出了由 Vitest 支持的全新测试功能。

    Vite 生态系统也迎来了一批新成员,包括 TanStack StartOneEmber 等框架。Web 开发领域的创新速度日益加快,AstroNuxtSvelteKitSolid StartQwik CityRedwoodJSReact Router 等项目都在不断推陈出新。

    Vite 已被 OpenAI、Google、Apple、Microsoft、NASA、Shopify、Cloudflare、GitLab、Reddit 和 Linear 等众多知名公司采用。两个月前,我们创建了一份 使用 Vite 的公司列表。令人欣喜的是,许多开发者提交 PR 将他们的公司添加到列表中。回首 Vite 诞生至今,我们共同打造的生态系统增长速度之快,实在令人难以置信。

    Vite weekly npm downloads

    加速 Vite 生态系统

    上个月,StackBlitz 再次主办了第三届 ViteConf,吸引了整个社区的广泛参与。这是迄今为止规模最大的 Vite 会议,生态系统中的各路开发者齐聚一堂。Evan You 正式宣布成立 VoidZero,这是一家致力于为 JavaScript 生态系统构建开源、高性能和统一开发工具链的公司。VoidZero 推出了 Rolldown 和 Oxc,他们的团队正在加紧准备这些工具以供 Vite 采用。想了解 Vite 未来如何借助 Rust 实现更强大的性能,不妨观看 Evan 的主题演讲。

    https://youtube.com/watch?v=EKvvptbTx6k%3Fsi%3DEZ-rFJn4pDW3tUvp

    Stackblitz 推出了 bolt.new,这是一个结合了 Claude 和 WebContainers 的 Remix 应用,允许你使用提示语、编辑、运行和部署全栈应用。Nate Weiner 宣布了 One,一个新的 Vite 驱动的 Web 和原生 React 框架。Storybook 展示了他们最新由 Vitest 驱动的 测试功能。还有更多精彩内容。我们建议你观看 全部 43 场演讲。演讲者们付出了巨大努力,分享了每个项目的最新进展。

    Vite 还更新了主页和域名。请记得将你的链接更新为新的 vite.dev 域名。新设计和实现由 VoidZero 完成,正是他们制作了自己的网站。特别感谢 Vicente Rodriguez 和 Simon Le Marchant 的贡献。

    Vite 6 的到来

    Vite 6 是自 Vite 2 以来最重要的主要版本发布。我们渴望与生态系统合作,通过新的 API 继续扩展我们的共享资源,并一如既往地提供一个更完善的构建基础。

    快速链接:

    如果你是 Vite 的新用户,我们建议首先阅读 入门指南 和 功能介绍 部分。

    我们要感谢超过 1000 位 Vite Core 贡献者 以及 Vite 插件、集成、工具和翻译的维护者和贡献者,他们帮助我们打造了这个新的主要版本。我们也邀请你参与进来,帮助我们改进整个生态系统的 Vite。了解更多信息,请参阅我们的 贡献指南

    如果准备开始的话,我们建议可以帮助 分类问题审查 PR、根据开放问题发送失败的测试 PR,并在讨论 和 Vite Land 的 帮助论坛 中帮助他人。如果你想与我们交流,请加入我们的 Discord 社区 并在 #贡献频道 中打个招呼。

    有关 Vite 生态系统和 Vite Core 的最新消息,请关注我们的 BlueskyX 或 Mastodon

    开始使用 Vite 6

    你可以使用 pnpm create vite 快速搭建一个 Vite 应用,使用你喜欢的框架,或在线体验 Vite 6,访问 vite.new。你还可以运行 pnpm create vite-extra 以获取其他框架和运行时(Solid、Deno、SSR 和库起始模板)的模板。当你在 create vite 下选择 Others 选项时,也可以使用 create vite-extra 模板。

    Vite 启动模板旨在作为测试 Vite 与不同框架结合的演练场。在构建下一个项目时,你可以试着使用每个框架推荐的启动模板。create vite 还提供了一些框架的快捷设置,如 create-vueNuxt 3SvelteKitRemixAnalog 和 Angular

    Node.js 支持

    Vite 6 与 Vite 5 类似,支持 Node.js 18、20 和 22+。Node.js 21 的支持已被移除。Vite 在旧版本的 Node.js 生命周期终止 (EOL)后停止支持。Node.js 18 EOL 在 2025 年 4 月底,届时我们可能会发布一个新主要版本以提高所需的 Node.js 版本。

    实验性环境 API

    Vite 正在通过新的环境 API 变得更加灵活。这些新 API 将允许框架作者提供更接近生产环境的开发体验,并为生态系统共享新的构建模块。如果你正在构建一个 SPA,使用 Vite 的单一客户端环境,一切将如以往一样工作。即使对于自定义 SSR 应用,Vite 6 也向后兼容。环境 API 的主要目标受众是框架作者。

    对于感兴趣的终端用户,Sapphi 撰写了一篇很好的 环境 API 介绍 指南。这是一个很好的起点,帮助你理解我们为何努力使 Vite 更加灵活。

    如果你是框架作者或 Vite 插件维护者,并希望利用新 API,你可以在 环境 API 指南 中了解更多信息。

    我们要感谢所有参与定义和实现新 API 的伙伴。这个故事始于 Vite 2 采用了由 Rich Harris 和 SvelteKit 团队开创的无打包 SSR 开发方案。Vite 的 SSR 转换随后启发了 Anthony Fu 和 Pooya Parsa 创建 vite-node 并改进 Nuxt 的开发 SSR 方案。Anthony 之后使用 vite-node 为 Vitest 提供支持,而 Vladimir Sheremet 在维护 Vitest 的过程中也在不断改进它。2023 年初,Vladimir 开始将 vite-node 上游合并到 Vite Core 中,一年后我们在 Vite 5.1 中将其作为 Runtime API 发布。来自生态系统合作伙伴(特别感谢 Cloudflare 团队)的反馈推动我们对 Vite 的环境进行更雄心勃勃的重构。你可以在 Patak 的 ViteConf 24 演讲 中了解更多关于这个故事的信息。

    Vite 团队的每个人都参与了新 API 的定义,该 API 是与生态系统中许多项目的反馈共同设计的。感谢所有参与者!如果你正在基于 Vite 构建框架、插件或工具,我们鼓励你参与进来。新 API 是实验性的。我们将与生态系统合作,审查新 API 的使用方式,并在下一个主要版本中稳定它们。如果你想提问或反馈意见,这里有一个 开放的 GitHub 讨论

    主要变化

    此外,还有一个新的 破坏性变更 页面,列出了 Vite 中所有计划的、正在考虑的和过去的更改。

    迁移到 Vite 6

    对于大多数项目,升级到 Vite 6 应该是很直接的,但我们建议在升级前查看 详细的迁移指南

    完整的更改列表请参见 Vite 6 更新日志