你好^_~;
我是 Lamine,很高兴能分享我的第一篇技术文章,探讨 ViteConf 2024 的亮点。作为一名深入技术写作的技术爱好者,我期待您的反馈和建议,以帮助改进我未来的内容。
在深入讨论会议细节之前,我们先来探讨一下Vite和ViteConf是什么?
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 个主要部分:
我们的活动带来了一些重大公告,为 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 上使用。
在 Evan 介绍了 OXC 和 Rolldown 以及它们即将与 Vite 环境集成之后,Oxc 项目的创建者 Boshen Chen 介绍了 OXC,这是一个用 Rust 编写的雄心勃勃、高性能、完全集成的 JavaScript 工具链,旨在显着提高提高性能和开发人员体验。它包括:
未来计划的组件包括:
博神还推出了Vite未来的捆绑器Rolldown,它使用OXC作为其核心引擎。 Rolldown 提供高性能并支持一系列功能,包括 tree-shaking、代码分割和插件兼容性。
下一步涉及 Vite 与 OXC 和 Rolldown 的更深入集成,这将带来显着的性能提升、更一致的开发者体验以及处理更大、更复杂的 Web 应用程序的能力。
Matias (Patak) 推出了环境 API,这是一项旨在增强 Vite 灵活性和性能的重大演变。该API允许开发人员在单个Vite项目中定义多个环境(例如:客户端、服务器、边缘),从而简化开发和部署流程。他注意到自 ViteConf 第一年以来,Nuxt、Remix 和 TanStack 等元框架的涌入。
演讲的主要内容包括:
Tomek 推出了 TutorialKit,这是一个创新的开源工具集,用于重新定义 JavaScript 生态系统中的交互式教程创建。为了解决当前文档的局限性,TutorialKit 提供了精心策划的实践学习体验,将用户指南与结构化演示和练习相结合。
TutorialKit 由 WebContainers 提供支持,基于 Svelte、Angular 和 Nuxt 等框架的见解而构建。通过一个命令 npm createtutorial,开发人员可以快速生成一个完整的教程项目——在不到一分钟的时间内完成课程描述、代码片段和实时预览。
TutorialKit 是高度可定制的,提供深色和浅色主题以及交互式终端,让学习者能够充分参与材料。该工具使开发人员、教育工作者和社区等能够直接在浏览器中创建更具吸引力的教育资源。
Mohammad 推出了 pkg.pr.new,这是一个供 npm 库维护者和用户预览未发布的分支、修复或功能的工具,无需复杂的设置。使用简单的命令,例如:
npm 我 https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
开发者可以立即测试特定版本,绕过持续发布等繁琐方法。
下一步包括与 ESM.sh 集成以提供 CDN 支持和自定义 UI,将 pkg.pr.new 的功能扩展到 Deno 和 Vue Playground 等环境。
在本节中,我们将探索使 Vite 更具适应性的新集成。从 Angular 支持到增强的测试和 CI 工作流程,这些更新揭示了 Vite 如何扩大其覆盖范围并简化开发者体验。
Chromatic 的 Storybook 维护人员 Yann Braga 推出了与 Vite 和 Vitest 的重要新集成,改变了 UI 组件的开发和测试。这些更新引入了 Vitest 插件,可将 Storybook 故事转换为功能测试,无需额外的测试用例即可轻松增加代码覆盖率。该插件的可视化调试功能允许开发人员从 CI 环境中实时检查失败的测试,从而促进无缝的团队协作。
在版本 9 中,Storybook 计划将视觉、可访问性和功能测试统一到一个有凝聚力的 UI 中,并过渡到仅 ESM 版本,以减少安装大小并提高性能。这些进步强化了 Storybook 对高效、简化的前端工作流程和全面组件测试的承诺。
Nx 高级工程师 Katerina Skroumpelou 强调了 Nx 为 Vite 项目带来的效率。她首先讨论了 Nx 如何优化 CI 工作流程并自动执行复杂任务,从而使构建流程更快、更简化。
接下来,她演示了如何在 React Vite 项目中使用 Nx。该演示展示了 Nx 如何通过缓存和 Nx 云集成等功能来增强性能。 Nx Cloud 支持扩展和任务重放,提供并行执行以提高速度。还新增了“nxaffected”命令,仅针对代码库修改部分智能运行任务,进一步优化 CI。
Katerina 强调,Nx 插件(例如 ESLint 和 Vite 的插件)可以简化迁移并无缝维护代码,而不会破坏现有结构。最后,她展示了如何为 CI 设置 GitHub Actions,展示了 Nx 跨代理高效分配任务的能力。
咨询公司 Evil Martians 的运营者 Irina Nazarova 分享了 Vite Ruby 如何改变 Rails 应用程序中的开发人员体验,为 Rails 的“No Build”方法提供了更好的替代方案。 Vite Ruby 已在 Power Home Remodeling Group 和 ClickFunnels 等公司成功实施,实现了更复杂的前端设置,同时保持了 Rails 开发人员友好的理念。
Bit 软件工程师、Vue.js Conf 团队成员赵锦江讨论了 Bit 从 Webpack/Jest 到 Vite/Vitest 的过渡。此开关允许具有集成测试的自定义开发环境、优化的构建和测试工作流程以及通过 Node API 增强的灵活性,从而促进了组件驱动的开发。
在本节中,我们将了解 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发展的影响。
Lukas Taegert-Atkinson 介绍了 Rollup 最近和即将推出的增强功能:
Pedro Cattori 和 Mark Dalgleish 介绍了将 Remix 迁移到 Vite 所带来的改进。
Pedro 重点关注服务器代码隔离,解释了他们如何摆脱依赖 treeshaking 来从客户端包中删除服务器代码。相反,他们实现了显式 Remix 转换并引入了 .server 文件后缀,当服务器代码可能泄漏到客户端时,这会提供明确的构建时错误。
Mark 介绍了 CSS 处理改进,展示了它们如何从 Remix 原始的基于 URL 的 CSS 导入演变为利用 Vite 的内置功能。这包括通过 Rollup 实现更好的 CSS 分块,以及使用 Vite 的 URL 查询字符串进行 CSS 导入的开发模式解决方案,确保开发和生产之间的行为一致,同时避免样式闪烁。
这些变化为 Remix 框架带来了更好的开发者体验、更稳健的代码分离以及更高效的 CSS 处理,展示了 Vite 迁移如何推动他们改进核心架构。
Shai Reznik 以有趣、俏皮的介绍开始他的演讲,将自己描述为“传奇表演者”,对他的技术能力有着令人印象深刻的说法。
在演讲中,Shai 重点介绍了 Qwik,这是一个 JS 框架,旨在通过消除水合作用来优化应用程序性能。与传统的服务器端渲染框架不同,传统的服务器端渲染框架依靠水合作用,通过在客户端重新运行 JS 来使应用程序具有交互性,Qwik 使用“JavaScript 流”。此过程将应用程序分解为微小的片段,在服务器端渲染期间对应用程序的结构和事件侦听器进行编码。然后,这些片段被发送到客户端,Qwik 在后台缓冲必要的代码。因此,一旦用户与其交互,应用程序就会变得具有交互性,而无需等待 JS 加载。
Shai 解释说,Qwik 会自动处理此过程,无需动态导入和延迟加载等手动优化。这可以通过加快加载时间来改善用户体验和搜索引擎优化 (SEO)。他还强调了 Qwik 的无缝扩展能力,使其既适用于简单的营销网站,也适用于复杂的应用程序。 Shai 向观众保证 Qwik 很稳定,拥有不断发展的社区和生态系统,包括身份验证、测试和部署的集成。
此外,Shai 还引入了未来的功能,例如预测缓冲、AI 驱动的优化(如死代码消除)和自动重构,旨在进一步简化开发流程并提高应用程序性能。
Volar.js 的创建者 Johnson Chu 推出了一个突破性的框架,用于构建支持跨各种环境的嵌入式语言的语言工具,例如 Vue.js、React、Svelte 以及集成在 Vite 生态系统中的工具。 Volar.js 现已被广泛采用,强调效率和模块化,使其成为优化开发工作流程的重要组成部分,特别是在使用 Vite 构建的项目中。
Johnson 分解了 Volar 的架构,强调:
Svelte 团队的 Rich 宣布对 Svelte 5 进行重大重写,旨在解决 Svelte 反应式系统的核心限制,尽管它在开发人员中很受欢迎。他将 Svelte 目前的结构概括为四点:
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 构建的工作系统,我们正在努力使其成为新项目的默认体验。
在本节中,我们将讨论将 Vite 性能推向新高度的工具和技术。关于 Nitro v3、Rollup 中的 Rust 集成以及本地优先 SQLite 应用程序的讨论揭示了构建更快、更高效的应用程序的策略。
CrabNebula 的 X 主管、Tauri 工作组和 SolidJS DX 团队的主要贡献者 Atila 推出了 Taurify,这是一种新的 SDK,旨在使用 Tauri 技术将 Web 应用程序转换为本机桌面和移动应用程序。
五个主要特点:
现场演示:
Nuxt 核心团队负责人 Daniel Roe 提出了使用 Vite 和 Nuxt 优化 Web 字体性能的创新方法。他解释了网络字体的挑战,例如布局变化和性能问题。 Roe介绍了3种工具:
Daniel 还强调了 Vite 的优势,特别是其多态性,可以实现 Nuxt 等框架与 Vite 团队之间的无缝协作。
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 应用程序性能的策略。他们强调了三个关键方面:
Igor 是 Cloudflare 的软件工程师,也是 Angular 的前贡献者,他讨论了“Web 多片”的概念,作为传统整体式 Web 应用程序的替代方案(多片应用程序由许多组件组成,独立运行以提高灵活性和鲁棒性)。他强调了多片应用程序的好处,多片应用程序由多个可以在不同上下文中运行的独立组件组成,与通常具有单入口点并可能导致性能问题、效率低下和安全风险的单片应用程序形成对比。
要点包括:
• 单体应用程序的当前状态: 如今的许多应用程序(例如 SPA 和 Node.js 应用程序)都是单体应用程序,从而导致性能降低和脆弱性增加等各种缺点。
• 多片架构的优点:这些应用程序可以更快、更安全、更易于理解,因为它们允许单独部署和更少的共享状态,从而减少攻击面。
• 复杂性考虑因素: 虽然多块具有明显的优势,但它们带来了配置、构建和部署的复杂性。然而,开发人员经常无意中创建多块,尤其是在全栈应用程序中。
• Vite v6 的作用: Vite v6 中新的环境 API 通过启用多个环境和独立构建而简化了多片应用程序的创建,而不会带来巨大的复杂性,并提供热模块替换(HMR)等功能。
UnJS 和 Nitro 的创建者 Pooya Parsa 推出了 Nitro v3,这是一个服务器工具包,用于使用强大的 API 构建与部署无关的服务器。 Nitro 简化了任何提供商的应用程序编译和捆绑。
关键组件:
Nitro v3 优先考虑与 Web 标准和边缘平台的兼容性,同时保持 Node.js 支持。新的 API 简化了服务器定义并增强了可组合性、可观察性和可测试性。
Pooya 还发布了 H3 v2,与 Nitro v3 一起发布,具有更小的捆绑包大小和更快的响应处理速度,完全基于 Web 标准。未来的更新将探索 Vite 集成和混合原生 Polyfill,以在边缘平台上实现更好的兼容性和性能。
在本节中,我们将介绍旨在简化调试和测试的更新。 Chrome DevTools、Vitest 和 Vue Devtool Kit 中的新功能为开发人员提供了更大的控制权,有助于简化开发过程。
Chrome DevTools 团队的 Jecelyn 介绍了四个基本工具,可以实现更快、更有效的调试:
在一系列的3个技术深度探讨中,Vitest核心团队成员Vladimir(Vitest和Vite团队成员)、Ari(Vitest核心团队和StackBlitz工程师)和Misha Kaletsky(expect-type作者)分享了有关Vitest的更新,一个快速而现代的 JavaScript 测试框架,在过去的一年里,每周的下载量增加了三倍,达到约 600 万次。
讲座还展示了这些功能的实际演示,强调了 Vitest 的易用性和高效性。演讲者强调了使用 Vitest 进行现代 JavaScript 和 TypeScript 开发的好处,特别是它能够加速开发工作流程并确保代码质量。
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 等第三方工具的功能。
Joyee,Node.js 贡献者,介绍了 Node.js 模块加载系统的最新和即将推出的改进,重点是更好的 ESM 支持和开发人员体验。
require() 中的 ESM(实验性)
o CommonJS 模块现在可以 require() ES 模块。
o 限制:没有顶级等待支持。
o 即将进入 Node.js 23 稳定版。
开发人员改进
o 自动检测 .js 文件中的 ES 模块。
o 模块编译缓存以加快加载速度。
o 内置模块检测,无需顶级等待。
o 用于定位有问题的顶级等待代码的工具。
包管理:
o 新的出口条件以防止双重包装问题
o 更好的 CommonJS 到 ESM 迁移支持
开发者工具:
o 同步模块加载器钩子
o 用于环境设置的运行时配置文件
重点是改进 ESM 支持,同时保持向后兼容性和开发人员体验。
在本节中,我们将深入探讨 Vite 的实际应用。 Excalidraw、Shopify 和其他项目的案例研究凸显了 Vite 的速度、灵活性和开发人员体验如何在生产环境中发挥作用。
Excalidraw 的维护者 Aakansha 讨论了将项目从 Create React App (CRA) 迁移到 Vite 的经验,这是由于需要更快的构建和 HMR 时间、更大的灵活性和更好的维护。
2021 年 Patak 将 Vite 集成到 Excalidraw 后,迁移过程开始,引起了团队的注意。由于 Vite 更快的构建时间、更好的热模块替换以及不断增长的社区,他们决定迁移,面临的挑战是:
但是,团队在部署后遇到了一个主要问题 - HMR 对于大文件的性能显着下降。这对开发者体验产生了负面影响,导致了恢复。经过调查并删除插件后,他们解决了问题并成功部署。
Excalidraw 的 Vite 迁移在社区的大力帮助下完成,增强了开发者体验并简化了构建。
Jason Miller 开发人员致力于 Shopify 最大的 React 代码库(500 万行 TypeScript 和 800 条路由),Jason 强调了从 Webpack 迁移到 Vite 的好处。此迁移使启动时间缩短为 15 秒,将 HMR 性能从 12 秒降低到 5 毫秒,并将模块数量从 18,000 个优化到 2,300 个。这些改进使团队能够转向本地开发,而不是依赖基于云的 IDE。
Christoph Nakazawa,游戏开发者 Christoph 解释了 Vite 如何帮助他构建 Athena Crisis,一款包含 214,000 行 JavaScript 的跨平台游戏。 Vite 通过 vite-plugin-pwa 提供 30ms 热重载和离线支持,并允许前端和后端代码无缝捆绑,从而实现跨平台的快速 3 分钟部署周期。
Storyblok 的开发体验工程师、TresJS 库的创建者 Alvaro Sabu 在 ViteConf 登陆页面分享了构建 3D 拼图的历程。这个交互式谜题是使用基于 Vue 的 3D 库 TresJS 创建的,用户可以通过集成代码编辑器来解决。
阿尔瓦罗描述了设计拼图的关键步骤:创建四面体和八面体块,使用四元数和动画帧实现旋转逻辑,并将其无缝集成到网页中。一个突出的功能是使用 WebContainers 在页面中嵌入 Vite 开发服务器,允许用户实时编辑拼图背后的 JavaScript。
阿尔瓦罗还提供了有关克服挑战的见解,例如使用临时小组进行连续轮换和优化性能。该项目强调了 TresJS 和 WebContainers 创建沉浸式、可编辑 3D Web 体验的能力。
在本节中,我们将讨论 Vite 生态系统的未来及其社区重点。关于文档、开源原则和框架融合的讨论强调了 Vite 在构建协作、前瞻性开发者社区方面的作用。
Ben Holmes 推出了“本地优先”应用程序,展示了它们完全在浏览器中运行的潜力。他使用 Astro 演示了这一点,并强调了如何使用 SQLocal 等库在客户端管理 SQLite,从而将数据安全地存储在浏览器中。关键要点是:
搜索功能:
。 基本搜索:最初使用SQL的LIKE运算符实现文本搜索。
。 AI 驱动的搜索:集成了
的通用句子编码器
TensorFlow 用于基于相似性的智能搜索,使用户即使在术语模糊的情况下也能找到相关文档。
技术见解:讨论了在浏览器中加载大型 AI 模型等挑战以及使用 Web Worker 来提高性能的重要性。
用户体验:该演示采用浏览器原生元素来实现可访问性和带有视图转换的流畅动画,从而增强搜索体验。
最后,Ben 强调了本地优先应用中设备端 AI 计算令人兴奋的未来。
Netlify 首席执行官 Mat Bilmann 概述了 Web 开发从整体结构到 Jamstack 和现代框架的转变,强调了前端和后端解耦以获得更大灵活性和可扩展性的好处。虽然 Gatsby、Next.js 和 Nuxt.js 等早期框架简化了工作流程,但它们也增加了复杂性。
Bilmann 现在主张过渡到更小的、可组合的原语,以允许更定制的 Web 应用程序。 Vite 在这一转变中发挥着关键作用,为 Astro、TanStack Start 和 Vike 等新框架的诞生提供了坚实的基础。这些框架优先考虑简单性、模块化和性能,使开发人员能够构建高效且可维护的 Web 应用程序。
Google Angular 产品负责人 Minko Gechev 讨论了 Angular 和 React 之间的相似之处,以及前端框架的未来趋势。他解释了这两个框架尽管使用不同的语法(模板与 JSX),却如何利用类似的方法进行变更检测和优化。
Minko 演讲的核心焦点是 Signals 的介绍,这是 Vue、Solid 和 Svelte 等框架也使用的一种原语。 Angular 的 Signals 实现通过跟踪数据依赖性并最大限度地减少不必要的重新渲染来提高性能。
Minko 强调了 Angular 与 Google Wiz 框架的合作,旨在共享性能优化并增强开发人员体验。值得注意的例子包括事件重放,它可以有效地解决交互性差距,以及增量水合作用,它可以提高页面加载性能。
他预测框架将继续向细粒度的代码加载和事件重放靠拢,以增强用户体验,在选择框架时强调稳定性、生态系统和个人喜好。
OpenSauced 项目背后的关键人物 Brian Douglas(B Dougie)讨论了 Vite 生态的文化和发展。他强调,Vite 现在每周的下载量达到 1500 万次,这是一个令人印象深刻的里程碑。
Dougie 还介绍了 StarSearch,这是他的团队开发的一款工具,用于识别 Vite 社区中的关键贡献者,重点关注 Anthony Fu、Patak、Brandon Roberts 和 Toby 等人物在推动 Vite 开发和采用方面所发挥的作用。 Dougie 最后引用了 Evan Yu 的一句话,强调伟大的贡献者是 Vite 成功的关键,而 Vite 对开发者体验和问题解决的关注是其在前端生态系统中发展的核心。
Anthony Fu 在演讲中探讨了开源工具开发的渐进性概念。以下是主要要点:
怎样才是一个好的开源工具?
Sarah Rainsberger 的演讲强调了文档如何成为社区发展的强大但经常被忽视的工具。投资于维护良好且易于访问的文档可以培育一个积极参与、可持续发展的社区,从而从整体上加强项目。
她解释了文档如何培育活跃的开源社区:
在本节中,我们将探索推动 Vite 实现新功能的开创性框架。关于 Vike、WebAssembly 集成和零到一的演讲展示了 Vite 如何实现塑造下一代 Web 应用程序的创新方法。
重塑框架,从零到一
Nathan Wienert 推出了“One”,这是一个新的 React 框架,它具有两个主要功能:
设置非常简单:使用 npx one 创建一个 One 应用程序,它充当 Vite 插件,方便配置。支持多种渲染模式(服务器端、静态或客户端),并使用 Tamagui 增强 Web 功能以优化样式。
该框架有效地处理服务器和客户端之间的数据获取和同步,使用 SWC 替换 Babel 以加快构建时间。通过特定于平台的扩展,它可以跨设备提供独特的体验,展示其静态和动态应用程序的多功能性。
Nathan 的会议强调了 One 的目标,即无缝连接 Web 和本机应用程序开发,使其立即可用,零即将公开测试版。
Natalia Venditto,Microsoft Azure 的 JavaScript 开发体验主要负责人,讨论了 WebAssembly 如何在 JavaScript 环境(客户端和服务器端)中实现高性能代码执行。
关键技术点
WebAssembly 基础知识
o 将代码从 C /Rust 等语言编译为可移植的二进制文件。
o 通过 WebAssembly 绑定与 JavaScript 无缝集成。
o 更高效地运行计算密集型操作。
开发工具
o 用于 WebAssembly 集成的 Vite 插件。
o 浏览器和 VS Code 中的调试支持。
o 对已编译代码进行直接源代码级调试。
组件模型
o 新架构提供更好的跨语言支持。
o 处理数字之外的复杂数据类型。
o 启用 JavaScript 到 WebAssembly 编译。
最后,她强调了 WebAssembly 在开发中的可移植性和组合性方面的潜力,并邀请开发者参与 Vite 生态系统中不断发展的工具和插件。
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 创新、公告和未来之路的详细内容。更多信息请关注PHP中文网其他相关文章!