首页 > web前端 > js教程 > 正文

ViteConf 创新、公告和未来之路

DDD
发布: 2024-11-17 11:14:01
原创
367 人浏览过

你好^_~;
我是 Lamine,很高兴能分享我的第一篇技术文章,探讨 ViteConf 2024 的亮点。作为一名深入技术写作的技术爱好者,我期待您的反馈和建议,以帮助改进我未来的内容。

在深入讨论会议细节之前,我们先来探讨一下ViteViteConf是什么?

Vite 是由 Evan You(Vue.js 的创建者)创建的下一代前端构建工具。它通过使用本机 ES 模块的开发服务器提供闪电般快速的热模块替换 (HMR),从而显着增强了 Web 开发体验。 Vite 配置简单,使用 Rollup 捆绑代码,并利用 SWC(Speedy Web Compiler)进行高效的代码转换。
ViteConf 是一年一度的免费在线活动,以引人入胜的互动形式将 Vite 社区聚集在一起。专家和爱好者齐聚一堂,分享知识并展示新功能。今年(2024 年 10 月 3 日至 4 日)是该活动的第三届,在 12 小时的马拉松比赛中设有 43 个工作坊。

总结 12 小时的内容以及大量技术细节非常具有挑战性。但我已经尽力在不遗漏重要信息的情况下最大限度地总结它。为了简化我们的文章,我保留了大多数 ViteConf 演讲的原始标题,并将它们分为 8 个主要部分:

  • ViteConf24 的热门公告。
  • 增强的 Vite 集成。
  • 使用 Vite 进行特定于框架的开发。
  • 性能和效率提升。
  • 开发者工具和调试增强功能。
  • 真实案例研究和成功故事。
  • 未来趋势和社区发展。
  • 探索框架设计的新领域。

ViteConf Innovations, Announcements, and the Road Ahead

我们的活动带来了一些重大公告,为 Vite 的未来铺平道路。富有远见的演讲者介绍了具有重塑网络开发潜力的改变游戏规则的工具和平台。让我们来深入了解一下亮点吧!

无效(⌀):

Evan You 宣布成立 Void Zero,这是一家专注于构建下一代 JavaScript 工具的新公司。该公司已筹集了 460 万美元的种子资金,由 Accel 和 Amplify Partners 牵头,开发者工具领域经验丰富的创始人也参与其中。 Void Zero 致力于实现 Evan 的愿景,即为 JavaScript 开发创建一个与运行时无关的统一、高性能和可组合的工具链。 Evan 还讨论了 Void Zero 目前的进展,并分享了一些令人印象深刻的测试基准,这些基准肯定会令人惊叹。

螺栓.新:

StackBlitz 联合创始人 Eric Simons 宣布 Bolt.new,这是一款革命性工具,利用 StackBlitz 的 WebContainer 技术的既定功能,有望重塑 Web 开发格局。 Bolt.new 为开发人员提供了全栈、浏览器内环境,允许即时项目创建、调试、错误修复和部署,所有这些均由最先进的大型语言模型 Claude 和 V0 提供支持。
Eric 解释了 Bolt.new 是如何设计来消除设置时间的。通过输入简单的提示,开发人员可以直接从浏览器生成完全配置的应用程序,这真正改变了游戏规则。通过集成的包管理和依赖性处理,他在演讲中展示的力量是无与伦比的。掌握其潜力的最佳方法就是亲自尝试 Bolt.new。
在此公告后,Eric 还透露了另一个重大更新:Bolt.new Core 现已开源并可在 github 上使用。

OXC 和回滚:

在 Evan 介绍了 OXC 和 Rolldown 以及它们即将与 Vite 环境集成之后,Oxc 项目的创建者 Boshen Chen 介绍了 OXC,这是一个用 Rust 编写的雄心勃勃、高性能、完全集成的 JavaScript 工具链,旨在显着提高提高性能和开发人员体验。它包括:

  • 解析器: 高性能解析器,性能优于 SWC 和 Babel 等现有工具。
  • Linter (OxLint): 一种快速的 linter,可以有效分析大型代码库,包含来自 ESLint 的 400 条规则,但性能比它高出 50-100 倍。
  • 解析器: 模块解析系统比 webpack 和其他现有工具快 28 倍。
  • Transformer(正在进行中): 一个强大的变压器,可以处理各种 JavaScript 方言,包括 TypeScript 和 JSX,目前支持 TypeScript 和 React JSX 转换。

未来计划的组件包括:

  • 格式化程序: 设计为兼容 Prettier。
  • 压缩器:旨在实现更快的速度和增强的压缩。

博神还推出了Vite未来的捆绑器Rolldown,它使用OXC作为其核心引擎。 Rolldown 提供高性能并支持一系列功能,包括 tree-shaking、代码分割和插件兼容性。
下一步涉及 Vite 与 OXC 和 Rolldown 的更深入集成,这将带来显着的性能提升、更一致的开发者体验以及处理更大、更复杂的 Web 应用程序的能力。

新环境 API:灵活性新时代:

Matias (Patak) 推出了环境 API,这是一项旨在增强 Vite 灵活性和性能的重大演变。该API允许开发人员在单个Vite项目中定义多个环境(例如:客户端、服务器、边缘),从而简化开发和部署流程。他注意到自 ViteConf 第一年以来,Nuxt、Remix 和 TanStack 等元框架的涌入。
演讲的主要内容包括:

  • 生态系统扩展:Vite 现在支持 Angular、Redwood、Remix、TanStack Start、Waku、Ember 和 Meteor,其基于 ESM 的无捆绑设计和 Rollup 插件 API 是其成功的核心。
  • 简化的SSR和统一配置:Vite采用Rollup的插件API和受SvelteKit启发的SSR结构简化了设置,确保了开发和生产环境的一致。环境 API 允许开发人员在一个位置配置客户端、SSR 或边缘环境。
  • 环境 API 亮点: 每个环境(例如客户端、SSR)现在都有自己的模块图,可以使用新命令 vite build app 在单个配置中启用多个环境。主要优点包括支持多环境配置、改进的工具集成(例如 Miniflare)以及增强的框架插件支持。 Patak 最后讨论了 Vite 6 对向后兼容性的关注以及社区反馈对于进一步完善环境 API 的重要性。

教程套件:

Tomek 推出了 TutorialKit,这是一个创新的开源工具集,用于重新定义 JavaScript 生态系统中的交互式教程创建。为了解决当前文档的局限性,TutorialKit 提供了精心策划的实践学习体验,将用户指南与结构化演示和练习相结合。
TutorialKit 由 WebContainers 提供支持,基于 Svelte、Angular 和 Nuxt 等框架的见解而构建。通过一个命令 npm createtutorial,开发人员可以快速生成一个完整的教程项目——在不到一分钟的时间内完成课程描述、代码片段和实时预览。
TutorialKit 是高度可定制的,提供深色和浅色主题以及交互式终端,让学习者能够充分参与材料。该工具使开发人员、教育工作者和社区等能够直接在浏览器中创建更具吸引力的教育资源。

pkg.pr.new:

Mohammad 推出了 pkg.pr.new,这是一个供 npm 库维护者和用户预览未发布的分支、修复或功能的工具,无需复杂的设置。使用简单的命令,例如:
npm 我 https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
开发者可以立即测试特定版本,绕过持续发布等繁琐方法。
下一步包括与 ESM.sh 集成以提供 CDN 支持和自定义 UI,将 pkg.pr.new 的功能扩展到 Deno 和 Vue Playground 等环境。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将探索使 Vite 更具适应性的新集成。从 Angular 支持到增强的测试和 CI 工作流程,这些更新揭示了 Vite 如何扩大其覆盖范围并简化开发者体验。

使用 Storybook 和 Vitest 进行组件测试:

Chromatic 的 Storybook 维护人员 Yann Braga 推出了与 Vite 和 Vitest 的重要新集成,改变了 UI 组件的开发和测试。这些更新引入了 Vitest 插件,可将 Storybook 故事转换为功能测试,无需额外的测试用例即可轻松增加代码覆盖率。该插件的可视化调试功能允许开发人员从 CI 环境中实时检查失败的测试,从而促进无缝的团队协作。
在版本 9 中,Storybook 计划将视觉、可访问性和功能测试统一到一个有凝聚力的 UI 中,并过渡到仅 ESM 版本,以减少安装大小并提高性能。这些进步强化了 Storybook 对高效、简化的前端工作流程和全面组件测试的承诺。

与 Nx 一起让您的 Vite 项目飞起来

Nx 高级工程师 Katerina Skroumpelou 强调了 Nx 为 Vite 项目带来的效率。她首先讨论了 Nx 如何优化 CI 工作流程并自动执行复杂任务,从而使构建流程更快、更简化。
接下来,她演示了如何在 React Vite 项目中使用 Nx。该演示展示了 Nx 如何通过缓存和 Nx 云集成等功能来增强性能。 Nx Cloud 支持扩展和任务重放,提供并行执行以提高速度。还新增了“nxaffected”命令,仅针对代码库修改部分智能运行任务,进一步优化 CI。
Katerina 强调,Nx 插件(例如 ESLint 和 Vite 的插件)可以简化迁移并无缝维护代码,而不会破坏现有结构。最后,她展示了如何为 CI 设置 GitHub Actions,展示了 Nx 跨代理高效分配任务的能力。

使用Vite Ruby

咨询公司 Evil Martians 的运营者 Irina Nazarova 分享了 Vite Ruby 如何改变 Rails 应用程序中的开发人员体验,为 Rails 的“No Build”方法提供了更好的替代方案。 Vite Ruby 已在 Power Home Remodeling Group 和 ClickFunnels 等公司成功实施,实现了更复杂的前端设置,同时保持了 Rails 开发人员友好的理念。

通过Node API练习Vite和Vitest

Bit 软件工程师、Vue.js Conf 团队成员赵锦江讨论了 Bit 从 Webpack/Jest 到 Vite/Vitest 的过渡。此开关允许具有集成测试的自定义开发环境、优化的构建和测试工作流程以及通过 Node API 增强的灵活性,从而促进了组件驱动的开发。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将了解 Vite 如何为 SolidJS、Svelte 和 Remix 等主要框架提供支持。这些进展展示了 Vite 如何根据每个框架的需求推动新功能和性能改进。

跨越网络鸿沟

SolidJS 的创建者 Ryan Carniato 分享了 SolidStart(5 月达到 1.0 版本)如何发展以统一客户端和服务器开发。 SolidStart 基于 Vite、Vinxi 和 Nitro 构建,引入了服务器功能,并成为第一个具有简化、无路由器架构的 JavaScript 框架,实现了令人印象深刻的轻量级 4.7KB 捆绑包大小。
在 Chrome 团队的资助下,Ryan 和 Alexis 开发了 Seroval,这是一个强大的序列化工具,能够处理异步数据和流。这带来了一项重大突破:单次突变,它将操作和数据获取有效地结合到一个无缝请求中。他们通过交互式 Trello 看板演示演示了这一概念,展示了性能提升。
Ryan还强调了Vite生态系统对于实现快速原型的重要性,并强调了它对Solid 2.0发展的影响。

Rollup 的演变:关注性能和现代语法

Lukas Taegert-Atkinson 介绍了 Rollup 最近和即将推出的增强功能:

  • 通过 Rust 迁移实现性能升级: Rollup 与 Rust 的集成将捆绑速度提高了 20%,并将内存使用量减少了 5%。接下来的步骤包括用于更快加载的二进制缓存和异步插件解析 API。
  • 优化的 Tree-Shaking: Rollup 的 Tree-Shaking 已经过改进,可以更有效地删除未使用的代码,并对函数参数、动态导入和对象属性进行优化。
  • 扩展语法支持: Rollup 现在支持显式资源管理、装饰器和本机 JSX,并且即将提供潜在的 TypeScript 支持。 Rollup 对性能、现代语法支持和无缝开发人员体验的承诺巩固了其作为领先 JavaScript 捆绑商的地位。随着它的发展,我们可以期待更强大的功能和优化。

Vite 如何让 Remix 变得更好

Pedro Cattori 和 Mark Dalgleish 介绍了将 Remix 迁移到 Vite 所带来的改进。
Pedro 重点关注服务器代码隔离,解释了他们如何摆脱依赖 treeshaking 来从客户端包中删除服务器代码。相反,他们实现了显式 Remix 转换并引入了 .server 文件后缀,当服务器代码可能泄漏到客户端时,这会提供明确的构建时错误。
Mark 介绍了 CSS 处理改进,展示了它们如何从 Remix 原始的基于 URL 的 CSS 导入演变为利用 Vite 的内置功能。这包括通过 Rollup 实现更好的 CSS 分块,以及使用 Vite 的 URL 查询字符串进行 CSS 导入的开发模式解决方案,确保开发和生产之间的行为一致,同时避免样式闪烁。
这些变化为 Remix 框架带来了更好的开发者体验、更稳健的代码分离以及更高效的 CSS 处理,展示了 Vite 迁移如何推动他们改进核心架构。

Qwik - 魔法背后

Shai Reznik 以有趣、俏皮的介绍开始他的演讲,将自己描述为“传奇表演者”,对他的技术能力有着令人印象深刻的说法。
在演讲中,Shai 重点介绍了 Qwik,这是一个 JS 框架,旨在通过消除水合作用来优化应用程序性能。与传统的服务器端渲染框架不同,传统的服务器端渲染框架依靠水合作用,通过在客户端重新运行 JS 来使应用程序具有交互性,Qwik 使用“JavaScript 流”。此过程将应用程序分解为微小的片段,在服务器端渲染期间对应用程序的结构和事件侦听器进行编码。然后,这些片段被发送到客户端,Qwik 在后台缓冲必要的代码。因此,一旦用户与其交互,应用程序就会变得具有交互性,而无需等待 JS 加载。
Shai 解释说,Qwik 会自动处理此过程,无需动态导入和延迟加载等手动优化。这可以通过加快加载时间来改善用户体验和搜索引擎优化 (SEO)。他还强调了 Qwik 的无缝扩展能力,使其既适用于简单的营销网站,也适用于复杂的应用程序。 Shai 向观众保证 Qwik 很稳定,拥有不断发展的社区和生态系统,包括身份验证、测试和部署的集成。
此外,Shai 还引入了未来的功能,例如预测缓冲、AI 驱动的优化(如死代码消除)和自动重构,旨在进一步简化开发流程并提高应用程序性能。

Volar.js:它是如何工作的以及下一步是什么

Volar.js 的创建者 Johnson Chu 推出了一个突破性的框架,用于构建支持跨各种环境的嵌入式语言的语言工具,例如 Vue.js、React、Svelte 以及集成在 Vite 生态系统中的工具。 Volar.js 现已被广泛采用,强调效率和模块化,使其成为优化开发工作流程的重要组成部分,特别是在使用 Vite 构建的项目中。
Johnson 分解了 Volar 的架构,强调:

  • 语言核心模块,处理基本操作。
  • 语言服务模块,管理嵌入式代码并公开在 Vite 支持的项目中有效使用的 API。
  • 插件层,支持定制和高效的代码转换,这对于像 Vite 这样的框架至关重要。 Volar和Astro的核心成员Erika讨论了Volar过去一年的进展,强调了让Vite用户受益的改进。该团队推出了新功能、增强了性能并解决了错误,为 Volar 的稳定性做出了贡献,并使其成为基于 Vite 开发的强大工具。

Svelte 5:超越组件

Svelte 团队的 Rich 宣布对 Svelte 5 进行重大重写,旨在解决 Svelte 反应式系统的核心限制,尽管它在开发人员中很受欢迎。他将 Svelte 目前的结构概括为四点:

  • 充当生成普通 JavaScript 的编译器。
  • 使用隐式、基于组件、编译器驱动的反应性。
  • 有局限性,例如无法跟踪函数内的反应性、大型对象的处理效率低下以及需要手动数组突变更新。
  • 反应变量仅在组件的顶层起作用。 然后他介绍了 Svelte 5 中的五个关键变化:
  • 引入“符文”以实现显式、通用、运行时驱动的细粒度反应性。
  • 启用跨组件的响应式状态共享。
  • 采用基于信号的反应性,并通过编译改进人体工程学。
  • 声称比其他框架具有性能优势。
  • 旨在简化学习曲线并减少代码。 此外,Rich 还预览了即将推出的 SvelteKit 与 Vite 6 环境 API 的改进,这将允许开发人员在本地开发期间利用特定于平台的 API(例如 Bun SQLite),并在单个应用程序中混合不同的服务器运行时。

Ember 与 Vite 的构建之旅

Chris Manson 讨论了 Ember.js 这个已有 13 年历史的前端框架如何通过 Vite 集成不断发展。 Ember 的遗留构建系统 Broccoli 对代码分割等现代优化提出了挑战。为了解决这个问题,引入了 Embroider 来弥合 Ember 的遗留构建系统和现代捆绑器之间的差距。它将 Ember 的传统西兰花树预处理为更清晰的结构,可以由新的捆绑器处理。 Embroider 的早期版本可与 Webpack 配合使用,但不稳定,需要进一步努力使其与 Vite 兼容。
关键的挑战是调整 Vite 的模块优先方法,使其与 Ember 较旧的基于 AMD 的模块配合使用。该解决方案涉及重新构建构建过程,其中 Vite 使用 Ember 插件驱动构建,而不是运行 Vite 的 Ember CLI。 Embroider Vite 插件的创建是为了处理模块解析和元数据,确保更顺畅的集成。
其成果是为 Ember 应用程序提供了一个使用 Vite 构建的工作系统,我们正在努力使其成为新项目的默认体验。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将讨论将 Vite 性能推向新高度的工具和技术。关于 Nitro v3、Rollup 中的 Rust 集成以及本地优先 SQLite 应用程序的讨论揭示了构建更快、更高效的应用程序的策略。

Rust 的力量:美化网络

CrabNebula 的 X 主管、Tauri 工作组和 SolidJS DX 团队的主要贡献者 Atila 推出了 Taurify,这是一种新的 SDK,旨在使用 Tauri 技术将 Web 应用程序转换为本机桌面和移动应用程序。
五个主要特点:

  1. 简单集成:在开发模式下作为包/板条箱无缝工作。
  2. 优化构建:通过无线更新将构建时间从几分钟缩短到几秒。
  3. 开发者工具:具有调试功能和热模块替换功能。
  4. 云集成:支持自动化部署和全面的发布管理。
  5. 生产就绪:优化捆绑包大小并有效管理应用程序更新。

现场演示:

  • 简单应用程序(Solid Hacker News):Atila 演示了基本的 Taurify 集成,包括 JSON 配置、实时开发功能和部署过程。
  • 复杂应用程序(Mastodon 客户端):他展示了 Taurify 的功能,展示了与复杂代码库的平滑集成和高效的云部署。

神奇地优化你的字体

Nuxt 核心团队负责人 Daniel Roe 提出了使用 Vite 和 Nuxt 优化 Web 字体性能的创新方法。他解释了网络字体的挑战,例如布局变化和性能问题。 Roe介绍了3种工具:

  • Fontaine: 一个现有工具,可在构建时将字体规格注入到 CSS 中。
  • Unifont: 一个新的开源工具,用于统一访问字体提供程序 API。
  • Nuxt Fonts: 一个基于两者构建的零配置模块,可自动处理字体优化,通过在本地提供字体来确保隐私和性能。

Daniel 还强调了 Vite 的优势,特别是其多态性,可以实现 Nuxt 等框架与 Vite 团队之间的无缝协作。

使用 Analog 构建下一个 Angular 元框架

AnalogJS 的创建者和 NgRx 维护者 Brandon Roberts 介绍了 AnalogJS,这是一个基于 Vite 构建的 Angular 元框架。他宣布发布 AnalogJS V1.8,旨在通过 Vite、Nitro 和 Nx 等工具增强 Angular 生态系统,打造全栈解决方案。 Analog 利用现代 Angular 功能,例如独立组件和增强的服务器端渲染 (SSR),提供基于文件的路由、静态站点生成和集成 API 路由。
主要功能和集成:
SSR 和静态生成: 支持各种平台(Node、Edge、Vercel 等)。
API 路由: 轻松定义服务器端点以及组件。
测试工具: 与 Vitest 和 Playwright 集成,使 Angular 与现代测试实践保持一致。
Storybook 及更多: Vite 支持与 Storybook 等组件库集成。
罗伯茨还透露了实验性功能,包括模拟单文件组件 (SFC) 和表单操作,旨在简化客户端-服务器数据处理。

表现!表现!表现!

Bjorn Lu 以幽默的方式开场,开玩笑地谈到了“性能神话”,然后深入探讨了提高 Web 应用程序性能的策略。他们强调了三个关键方面:

  1. 效率:减少不必要的操作,例如使用简单的循环而不是map/filter/reduce。
  2. 极简主义:仅使用所需的库部分,在更简单的情况下编写自定义代码。
  3. 足智多谋:利用系统资源,例如工作线程来并行化任务。 为了找出瓶颈,发言人建议将“模糊”的用户报告转化为具体的、可操作的问题。他们演示了如何使用 Chrome DevTools 和 npmgraph 等分析工具。 该演讲重点介绍了几个优化案例研究:
  4. 通过有针对性的分析将打包速度提高 4 倍
  5. 使用工作线程来加快 CSS 处理
  6. 通过动态计算减少Rollup的内存使用 发言者强调,随着时间的推移,微小的、渐进的改进会变得更加复杂。但他们警告说要平衡性能提升与可维护性。

使用 Vite 构建 Web Polyliths

Igor 是 Cloudflare 的软件工程师,也是 Angular 的前贡献者,他讨论了“Web 多片”的概念,作为传统整体式 Web 应用程序的替代方案(多片应用程序由许多组件组成,独立运行以提高灵活性和鲁棒性)。他强调了多片应用程序的好处,多片应用程序由多个可以在不同上下文中运行的独立组件组成,与通常具有单入口点并可能导致性能问题、效率低下和安全风险的单片应用程序形成对比。
要点包括:
单体应用程序的当前状态: 如今的许多应用程序(例如 SPA 和 Node.js 应用程序)都是单体应用程序,从而导致性能降低和脆弱性增加等各种缺点。
多片架构的优点:这些应用程序可以更快、更安全、更易于理解,因为它们允许单独部署和更少的共享状态,从而减少攻击面。
复杂性考虑因素: 虽然多块具有明显的优势,但它们带来了配置、构建和部署的复杂性。然而,开发人员经常无意中创建多块,尤其是在全栈应用程序中。
Vite v6 的作用: Vite v6 中新的环境 API 通过启用多个环境和独立构建而简化了多片应用程序的创建,而不会带来巨大的复杂性,并提供热模块替换(HMR)等功能。

Nitro v3 初探

UnJS 和 Nitro 的创建者 Pooya Parsa 推出了 Nitro v3,这是一个服务器工具包,用于使用强大的 API 构建与部署无关的服务器。 Nitro 简化了任何提供商的应用程序编译和捆绑。
关键组件:

  • 运行时功能:通过文件系统结构进行 API 路由、SSR 的内置渲染层、存储系统、任务运行器、缓存和嵌入式数据库。
  • Builder API:将应用程序逻辑与 Nitro 的生产功能捆绑在一起,由 Rollup 提供支持。它还包括一个可快速重建的开发服务器,并计划切换到 Vite 以获得更快的性能。

Nitro v3 优先考虑与 Web 标准和边缘平台的兼容性,同时保持 Node.js 支持。新的 API 简化了服务器定义并增强了可组合性、可观察性和可测试性。
Pooya 还发布了 H3 v2,与 Nitro v3 一起发布,具有更小的捆绑包大小和更快的响应处理速度,完全基于 Web 标准。未来的更新将探索 Vite 集成和混合原生 Polyfill,以在边缘平台上实现更好的兼容性和性能。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将介绍旨在简化调试和测试的更新。 Chrome DevTools、Vitest 和 Vue Devtool Kit 中的新功能为开发人员提供了更大的控制权,有助于简化开发过程。

您会喜欢的四个令人惊叹的开发工具更新

Chrome DevTools 团队的 Jecelyn 介绍了四个基本工具,可以实现更快、更有效的调试:

  1. 持久元素检查:使用“模拟聚焦页面”在检查时保持下拉列表等元素可见。链接视频中提供了更多技巧。
  2. 人工智能驱动的错误解决方案:使用 Gemini,单击错误上的新灯泡图标即可获得人工智能生成的解释和定制修复。
  3. 增强的性能面板:核心网络重要指标现在无需记录即可实时更新,开发者可以比较本地和真实世界的用户数据。
  4. 具有网络覆盖的 API 模拟:在后端准备就绪之前模拟 API 对测试 UI 的响应,并在本地存储覆盖以便于编辑。

Vitest:彻底改变 JavaScript 测试

在一系列的3个技术深度探讨中,Vitest核心团队成员Vladimir(Vitest和Vite团队成员)、Ari(Vitest核心团队和StackBlitz工程师)和Misha Kaletsky(expect-type作者)分享了有关Vitest的更新,一个快速而现代的 JavaScript 测试框架,在过去的一年里,每周的下载量增加了三倍,达到约 600 万次。

维测2.1亮点:

  • 浏览器模式:用于在浏览器中运行测试的重大改进和新的 UI,可以在真实的浏览器环境中测试前端代码。
  • 覆盖率:增强的覆盖率功能,包括浏览器模式的V8覆盖率,提供更快、更准确的覆盖率报告。
  • 类型测试:集成expect-type以进行编译时类型检查。
  • VS 代码扩展: 重写的扩展,可实现更快的性能、调试和覆盖可视化。 主要功能和改进:
  • 更快的测试执行:优化的性能和缓存机制。
  • 改进的调试体验: VS Code 扩展中增强的调试功能。
  • 全面的覆盖率报告:详细的覆盖率报告以及精细的见解。
  • 无缝类型检查:集成期望类型以进行稳健的类型验证。
  • 用户友好的用户界面: 视觉上吸引人且直观的用户界面。

讲座还展示了这些功能的实际演示,强调了 Vitest 的易用性和高效性。演讲者强调了使用 Vitest 进行现代 JavaScript 和 TypeScript 开发的好处,特别是它能够加速开发工作流程并确保代码质量。

Vue.js 生态系统中的开发工具套件

Vue.js 核心团队成员 Guillaume Chau 介绍了 Devtool Kit,这是一个统一框架,用于简化和增强跨 Vue.js、Nuxt 和潜在其他框架的调试工具的开发和兼容性。功能丰富但不兼容的 Nuxt 和 Vue Devtools 促使了 Devtool Kit 的创建,旨在将它们统一在一组通用的实用程序和 API 下。

主要目标是标准化实用程序和 API,以允许 Devtools 之间的无缝互操作性,并促进为任何框架(不仅仅是 Vue.js 或 Nuxt)创建新的 Devtools,同时支持各种环境,例如浏览器、Node.js 服务器或独立应用程序。

开发工具套件有四个模块:
主模块:注册页面模块并控制整体功能。
页面模块:在用户应用程序上下文中操作,允许与应用程序状态交互。
视图模块:管理可见界面,向用户显示信息。
服务器模块: 在开发过程中处理服务器端交互。
Devtool Kit 具有使用 postMessage 和 WebSockets 等技术的双向类型通信系统,无论上下文如何,都可以实现模块之间的无缝交互。

我们不要忘记模块化的“小程序”,它提供了高度定制的 Devtools 体验,集成了 Vue.js、Nuxt 甚至 Pinia 或 Tailwind 等第三方工具的功能。

Node.js 模块加载器中的新功能和即将推出的功能

Joyee,Node.js 贡献者,介绍了 Node.js 模块加载系统的最新和即将推出的改进,重点是更好的 ESM 支持和开发人员体验。

发布的功能:

  1. require() 中的 ESM(实验性)
    o CommonJS 模块现在可以 require() ES 模块。
    o 限制:没有顶级等待支持。
    o 即将进入 Node.js 23 稳定版。

  2. 开发人员改进
    o 自动检测 .js 文件中的 ES 模块。
    o 模块编译缓存以加快加载速度。
    o 内置模块检测,无需顶级等待。
    o 用于定位有问题的顶级等待代码的工具。

即将推出的功能

  1. 包管理:
    o 新的出口条件以防止双重包装问题
    o 更好的 CommonJS 到 ESM 迁移支持

  2. 开发者工具:
    o 同步模块加载器钩子
    o 用于环境设置的运行时配置文件

重点是改进 ESM 支持,同时保持向后兼容性和开发人员体验。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将深入探讨 Vite 的实际应用。 Excalidraw、Shopify 和其他项目的案例研究凸显了 Vite 的速度、灵活性和开发人员体验如何在生产环境中发挥作用。

将Excalidraw从CRA迁移到Vite

Excalidraw 的维护者 Aakansha 讨论了将项目从 Create React App (CRA) 迁移到 Vite 的经验,这是由于需要更快的构建和 HMR 时间、更大的灵活性和更好的维护。
2021 年 Patak 将 Vite 集成到 Excalidraw 后,迁移过程开始,引起了团队的注意。由于 Vite 更快的构建时间、更好的热模块替换以及不断增长的社区,他们决定迁移,面临的挑战是:

  • 测试: 在社区支持下迁移到 Vitest,使用 vitest-canvas-mock 进行基于画布的测试。
  • PWA 支持: 使用 vite-plugin-pwa 实现了语言环境和字体的缓存,解决了自定义 Rollup 配置的问题。

但是,团队在部署后遇到了一个主要问题 - HMR 对于大文件的性能显着下降。这对开发者体验产生了负面影响,导致了恢复。经过调查并删除插件后,他们解决了问题并成功部署。
Excalidraw 的 Vite 迁移在社区的大力帮助下完成,增强了开发者体验并简化了构建。

在 Shopify 上扩展 Vite:

Jason Miller 开发人员致力于 Shopify 最大的 React 代码库(500 万行 TypeScript 和 800 条路由),Jason 强调了从 Webpack 迁移到 Vite 的好处。此迁移使启动时间缩短为 15 秒,将 HMR 性能从 12 秒降低到 5 毫秒,并将模块数量从 18,000 个优化到 2,300 个。这些改进使团队能够转向本地开发,而不是依赖基于云的 IDE。

使用 Vite 进行视频游戏开发

Christoph Nakazawa,游戏开发者 Christoph 解释了 Vite 如何帮助他构建 Athena Crisis,一款包含 214,000 行 JavaScript 的跨平台游戏。 Vite 通过 vite-plugin-pwa 提供 30ms 热重载和离线支持,并允许前端和后端代码无缝捆绑,从而实现跨平台的快速 3 分钟部署周期。

Viteconf 3D拼图是如何构建的

Storyblok 的开发体验工程师、TresJS 库的创建者 Alvaro Sabu 在 ViteConf 登陆页面分享了构建 3D 拼图的历程。这个交互式谜题是使用基于 Vue 的 3D 库 TresJS 创建的,用户可以通过集成代码编辑器来解决。
阿尔瓦罗描述了设计拼图的关键步骤:创建四面体和八面体块,使用四元数和动画帧实现旋转逻辑,并将其无缝集成到网页中。一个突出的功能是使用 WebContainers 在页面中嵌入 Vite 开发服务器,允许用户实时编辑拼图背后的 JavaScript。
阿尔瓦罗还提供了有关克服挑战的见解,例如使用临时小组进行连续轮换和优化性能。该项目强调了 TresJS 和 WebContainers 创建沉浸式、可编辑 3D Web 体验的能力。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将讨论 Vite 生态系统的未来及其社区重点。关于文档、开源原则和框架融合的讨论强调了 Vite 在构建协作、前瞻性开发者社区方面的作用。

网络的未来是本地优先

Ben Holmes 推出了“本地优先”应用程序,展示了它们完全在浏览器中运行的潜力。他使用 Astro 演示了这一点,并强调了如何使用 SQLocal 等库在客户端管理 SQLite,从而将数据安全地存储在浏览器中。关键要点是:

  1. 文档编辑器:一个简单的编辑器,允许用户直接在浏览器的 SQLite 数据库中创建、编辑和保存文档,确保数据持久性,无需外部存储。
  2. 搜索功能:
    基本搜索:最初使用SQL的LIKE运算符实现文本搜索。
    AI 驱动的搜索:集成了
    的通用句子编码器 TensorFlow 用于基于相似性的智能搜索,使用户即使在术语模糊的情况下也能找到相关文档。

  3. 技术见解:讨论了在浏览器中加载大型 AI 模型等挑战以及使用 Web Worker 来提高性能的重要性。

  4. 用户体验:该演示采用浏览器原生元素来实现可访问性和带有视图转换的流畅动画,从而增强搜索体验。
    最后,Ben 强调了本地优先应用中设备端 AI 计算令人兴奋的未来。

从框架到原语

Netlify 首席执行官 Mat Bilmann 概述了 Web 开发从整体结构到 Jamstack 和现代框架的转变,强调了前端和后端解耦以获得更大灵活性和可扩展性的好处。虽然 Gatsby、Next.js 和 Nuxt.js 等早期框架简化了工作流程,但它们也增加了复杂性。
Bilmann 现在主张过渡到更小的、可组合的原语,以允许更定制的 Web 应用程序。 Vite 在这一转变中发挥着关键作用,为 Astro、TanStack Start 和 Vike 等新框架的诞生提供了坚实的基础。这些框架优先考虑简单性、模块化和性能,使开发人员能够构建高效且可维护的 Web 应用程序。

融合 Web 框架

Google Angular 产品负责人 Minko Gechev 讨论了 Angular 和 React 之间的相似之处,以及前端框架的未来趋势。他解释了这两个框架尽管使用不同的语法(模板与 JSX),却如何利用类似的方法进行变更检测和优化。
Minko 演讲的核心焦点是 Signals 的介绍,这是 Vue、Solid 和 Svelte 等框架也使用的一种原语。 Angular 的 Signals 实现通过跟踪数据依赖性并最大限度地减少不必要的重新渲染来提高性能。
Minko 强调了 Angular 与 Google Wiz 框架的合作,旨在共享性能优化并增强开发人员体验。值得注意的例子包括事件重放,它可以有效地解决交互性差距,以及增量水合作用,它可以提高页面加载性能。
他预测框架将继续向细粒度的代码加载和事件重放靠拢,以增强用户体验,在选择框架时强调稳定性、生态系统和个人喜好。

Vite生态文化

OpenSauced 项目背后的关键人物 Brian Douglas(B Dougie)讨论了 Vite 生态的文化和发展。他强调,Vite 现在每周的下载量达到 1500 万次,这是一个令人印象深刻的里程碑。

Dougie 还介绍了 StarSearch,这是他的团队开发的一款工具,用于识别 Vite 社区中的关键贡献者,重点关注 Anthony Fu、Patak、Brandon Roberts 和 Toby 等人物在推动 Vite 开发和采用方面所发挥的作用。 Dougie 最后引用了 Evan Yu 的一句话,强调伟大的贡献者是 Vite 成功的关键,而 Vite 对开发者体验和问题解决的关注是其在前端生态系统中发展的核心。

安东尼的开源之路 II:开源的进步之路

Anthony Fu 在演讲中探讨了开源工具开发的渐进性概念。以下是主要要点:
怎样才是一个好的开源工具?

  • 解决问题:与手动方法相比,好的工具可以显着减少工作量。
  • 易于学习和使用:较低的学习曲线鼓励更广泛的采用。
  • 社区驱动的改进:用户反馈和贡献推动持续改进。 进取的重要性:
  • 渐进式入门:初学者应该可以轻松使用工具并轻松学习。
  • 渐进式集成:灵活适应和集成各种场景是关键。
  • 渐进式功能:强大的功能应该逐步引入,让用户随着时间的推移加深知识。
  • 渐进式重大变更:应顺利引入重大变更,并提供向后兼容的迁移路径和选项。 Anthony 还提供了 Vue、Nuxt.js 和 Vite 等工具的渐进性示例,解释了每种工具如何遵循渐进式路径来增强用户体验和适应性。

文档作为社区建设

Sarah Rainsberger 的演讲强调了文档如何成为社区发展的强大但经常被忽视的工具。投资于维护良好且易于访问的文档可以培育一个积极参与、可持续发展的社区,从而从整体上加强项目。
她解释了文档如何培育活跃的开源社区:

  • 强大的社区对于项目的健康至关重要 - 更多的用户=>更多错误报告=>反馈和潜在贡献者。
  • 文档是社区建设中未充分利用的资源,因为与代码贡献相比,它的进入门槛较低。
  • 文档有许多重要的用途,例如教育、入门和营销,可以减轻维护人员的负担。
  • 确定现有的社区帮助者并邀请他们直接改进文档,即使是小修复。
  • 译者是有价值的贡献者,他们发现需要澄清的不清楚的段落。
  • Doc 的贡献者可以作为未来的代码贡献者加入,展示项目可用性。
  • 提供明确的贡献指导、简单的任务和公众认可,以鼓励更多参与。
  • 投资高质量、社区构建的文档对于开源项目的发展和可持续性至关重要。

ViteConf Innovations, Announcements, and the Road Ahead

在本节中,我们将探索推动 Vite 实现新功能的开创性框架。关于 Vike、WebAssembly 集成和零到一的演讲展示了 Vite 如何实现塑造下一代 Web 应用程序的创新方法。

探索框架设计新领域

重塑框架,从零到一
Nathan Wienert 推出了“One”,这是一个新的 React 框架,它具有两个主要功能:

  1. 无缝双服务: Vite 可以同时服务 React Native 和 Web 应用程序,为两种环境提供文件系统路由和热重载。
  2. 本地优先集成:它通过与 Zero 集成来强调本地优先方法,提供支持 Web 和本机应用程序之间代码共享的数据管理解决方案。

设置非常简单:使用 npx one 创建一个 One 应用程序,它充当 Vite 插件,方便配置。支持多种渲染模式(服务器端、静态或客户端),并使用 Tamagui 增强 Web 功能以优化样式。

该框架有效地处理服务器和客户端之间的数据获取和同步,使用 SWC 替换 Babel 以加快构建时间。通过特定于平台的扩展,它可以跨设备提供独特的体验,展示其静态和动态应用程序的多功能性。

Nathan 的会议强调了 One 的目标,即无缝连接 Web 和本机应用程序开发,使其立即可用,零即将公开测试版。

JavaScript 作为 Wasm 的源和目标

Natalia Venditto,Microsoft Azure 的 JavaScript 开发体验主要负责人,讨论了 WebAssembly 如何在 JavaScript 环境(客户端和服务器端)中实现高性能代码执行。
关键技术点

  1. WebAssembly 基础知识
    o 将代码从 C /Rust 等语言编译为可移植的二进制文件。
    o 通过 WebAssembly 绑定与 JavaScript 无缝集成。
    o 更高效地运行计算密集型操作。

  2. 开发工具
    o 用于 WebAssembly 集成的 Vite 插件。
    o 浏览器和 VS Code 中的调试支持。
    o 对已编译代码进行直接源代码级调试。

  3. 组件模型
    o 新架构提供更好的跨语言支持。
    o 处理数字之外的复杂数据类型。
    o 启用 JavaScript 到 WebAssembly 编译。

最后,她强调了 WebAssembly 在开发中的可移植性和组合性方面的潜力,并邀请开发者参与 Vite 生态系统中不断发展的工具和插件。

Vike - 下一代前端框架

Rom Brillout 推出了 Vike,这是一款专为灵活性而设计的下一代前端框架。他解释说,Vike 就像 Next.js 或 Nuxt,但具有高度可定制的扩展,允许开发人员使用任何 UI 框架。例如,Vike 可以在同一项目中混合使用 React、Solid 甚至 Vue 2 和 3 来运行应用程序。它支持所有渲染策略(SPA、SSR 和 SSG),并与各种数据获取方法(RPC、REST、GraphQL)集成。

关键的区别在于 Vike 在 MIT 许可下的开源模型。 Vike 不是传统的商业模式,而是提供了一种独特的方法,公司可以根据自己选择的企业用途付费。目标是保持 Vike 100% 开源,提供可持续的商业模式,同时确保所有开发人员均可访问。尽管具有灵活性和定制选项,Brillout 强调 Vike 已经可以稳定用于生产用途,并计划很快发布 1.0 版本。

结论:

感谢您看到我文章的结尾!我希望您觉得它内容丰富,并对 ViteConf 2024 令人兴奋的发展有了新的见解。
这篇文章的发布时间比计划的要长一些,因为我只能在周六的时候写它——但好事需要时间,对吧? ?

特别感谢我亲爱的朋友帮助我审阅和润色内容,以及所有鼓励我发表的人。特别感谢 ChatGPT 和 Claude ?帮助我提高英语水平,我希望它能很好地表达。

这是我的第一篇技术文章,您的支持对我来说意义重大。我期待写更多内容并继续与开发者社区分享知识。
请随时分享您的想法和反馈——我很乐意听取您的意见!你可以在以下位置找到我:
X (Twitter):@Mohamed_LamineF 或 LinkedIn:mohamedlaminef。

ViteConf Innovations, Announcements, and the Road Ahead

以上是ViteConf 创新、公告和未来之路的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板