本次分享围绕Vue框架、VoidZero工具链以及Cloudflare收购后的团队规划展开重点讨论了AI时代前端框架与工具的设计思路发布了Vue 3.6 RC、Vite 8、vite-plus等多个版本明确了后续开源与生态支持方向。AI对前端生态的影响主流框架的AI红利过去一年Vue的用量因为AI推荐翻了一倍受益于AI生成项目时主流框架语料更丰富更容易获得推荐。AI时代的框架设计思路主流框架凭借充足语料获得先发优势全新非主流框架突破用量难度更高最新的GPT-5.6、fable 5已经能实现对未训练新方案的触类旁通。大版本更新的AI体验影响Vue从v2升级到v3的大版本改动早期因为语料滞后AI会混淆新旧写法更新语料后问题解决因此框架设计优先保证API稳定性避免给AI用户带来负面影响。API设计的优先级调整AI不介意代码长度因此API设计优先保证一致性优先级高于简洁性Vue 3组合式API中保留define的完整写法不需要简化缩写更符合AI识别需求。同文件上下文对AI更友好AI偏好更少文件、更多上下文tailwind在AI时代走红的核心原因是将样式、结构、逻辑全部放在同一个文件中降低AI读取上下文的成本和Vue单文件组件的设计思路契合。Vue核心版本更新进展Vue 3.6更新方向Vue 3.6围绕性能和正确性优化保持API不变重构了响应式系统目前已经发布RC版本欢迎开发者试用。Vapor Mode性能表现Vapor Mode已经和React功能对齐在业界通用的js framework benchmark中性能已经超越Solid比Vue 2的build速度快很多是目前可用主流框架中性能最好的。响应式系统正确性优化Vue 3.4、3.5、3.6每个小版本都会重构响应式系统重构过程保证全部测试通过不会给用户带来回归问题Vue 3.6是目前唯一一个通过全部React对框架测试套件边界场景测试的框架。Vue生态更新情况核心依赖的ESM改造Pinia 4.0已经发布目前是ESM only彻底移除了CommonJS支持下一步Vite Runner 6.0也会改为ESM onlyVue core 4.0也将因为ESM改造提上议程但不会做破坏性API改动。Vue语言工具优化进展Vue语言工具团队今年清理了三百多个open issue目前只剩十几个open issue同时改进了跨分支类型推导、透传属性的类型识别等细节体验主要贡献者包括Johnson、杨俊等。社区Rust重写探索项目基于oxc用Rust重写了Vue全部工具链包括parser、formatter、type checker目前已经基本可用属于非官方项目欢迎开发者测试反馈团队成员pikas也用Rust重写了Vue的LSP支持探索不同方案。多终端渲染方案涌现最近半年涌现了多个基于Vue的多终端渲染方案包括运行在Linux上的Vue Native、运行在PSP上的Pocket JS、基于Vue的小程序渲染框架、基于Vapor Mode的Unity渲染方案、多个Terminal UI渲染方案。Vite 8核心更新完全迁移到RolldownVite 8核心更新是完全迁移到Rolldown解决了之前依赖esbuild和Rollup带来的生产环境性能问题、环境行为不一致问题由同一个团队垂直维护问题可以直接在流程层面解决。实验性支持打包模式Vite 8新增实验性的打包模式解决原生ESM开发模式下超大型应用首次加载请求过多、浏览器性能瓶颈的问题可以将模块打包为少数几个包加载该功能预计今年晚些时候稳定。VoidZero新一代工具链进展工具链能力完善目前VoidZero工具链已经趋于完善Oxlint实现了ESLint插件兼容和类型敏感检查Oxfmt实现了100%和Prettier行为一致Vitest可以替代Jesttsdown可以替代tsup整体可以简化项目的配置文件。vite-plus核心能力vite-plus是统一化工具链实现了Node版本自动管理、包管理器自动匹配、支持monorepo的任务运行器还带任务缓存功能目前已经发布beta版本全部MIT免费开源。AI时代统一工具链的价值AI开发中验证代码正确性、构建、测试会占用大量等待时间统一工具链可以压缩这部分时间将整体开发效率提升一倍以上同时减少AI的上下文消耗降低AI决策成本。Void全栈框架规划核心能力介绍Void是基于Vite的Cloudflare原生全栈部署平台添加插件即可获得全套全栈能力支持多框架自带文件路由、部分水合、Markdown页面、ISR缓存实现了从数据库到前端的全链路类型安全。开源计划调整Void原本计划商业化收购后调整规划会将框架层抽取为和Cloudflare解绑的开源项目支持部署到其他云平台今年晚些时候开源可满足企业内部快速上线全栈小应用的需求一个prompt即可完成从创建到上线。Cloudflare收购后的团队规划开源使命不变VoidZero加入Cloudflare后团队架构和工作内容几乎没有变化继续推进所有开源项目还会获得更多资源招聘更多成员支持开源开发。新生态支持公司成立收购后个人出资成立了Use Your Think公司本质类似基金会目的是给全职参与Vue生态维护的成员提供经济支持保障生态长期发展。AI时代的Markdown 渲染器https://markstream-vue-slidev.pages.dev/1传统Markdown渲染方案的问题全量解析渲染方案缺陷传统方案采用全量解析、全量替换更新的模式每次更新都会触发全量的parse和render会打断用户操作造成浏览器性能下降。早期无高亮渲染问题最早期方案用pre code标签渲染代码无语法高亮需要等待markdown标签完全闭合后才会替换DOM全量替换时CPU会被占满在GPT-3这类快模型上渲染层CPU占用会达到100%。带全量高亮渲染的问题增加全量语法高亮后使用Shiki、Monaco这类重量级高亮工具DOM层级更深全量更新成本更高主线程和内存占用会比无高亮方案更重。框架优化效果有限即使使用Vue这类带有性能优化策略的前端框架依然无法解决全量更新带来的问题最典型的问题就是代码块内的文本选中状态会在更新后丢失。Markstream View核心优化思路分层性能优化Markstream View不仅在渲染层做优化还在解析层同时做性能优化仅处理新增的尾部内容复用已稳定的历史节点同时将渲染拆分到多帧执行。极低性能占用演示demo显示流式渲染未闭合标签时主线程CPU占用率不到1%远低于传统方案。极简使用方式项目上手难度极低安装依赖后仅需要传入content参数和标识模型输出结束的final参数即可完成流式渲染配置。底层解析层的优化设计增量流式解析实现为了适配流式解析场景并处理异常边界项目底层自研了基于TypeScript的markdown解析器面向流式增量解析设计支持集成现有的focus、latin等标准工具性能优于原生方案。性能对比优势对比remark这类基于AST的解析方案自研解析器性能可达这类方案的500倍以上。全量场景也有优化该解析器不仅适配流式场景在全量markdown渲染场景也做了性能优化拆分解析任务替换原有解析器后性能会更好更快。长列表渲染优化策略可视区域优先渲染针对包含长AI对话历史的全量渲染场景项目优先保证可视区域内容的渲染。不阻塞用户交互通过合理使用if条件控制渲染所有渲染任务不会阻塞用户的交互行为。自定义组件集成能力适配业务自定义需求企业业务中存在自定义格式需求比如自定义XML格式的通知、业务自定义组件都可以轻松集成到Markstream View中。简单API实现自定义通过CSCustomer Component API只需要对应XML的type就能将流式输出的参数传入自定义组件完成自定义渲染。多框架多端适配能力底层解析器多端可用底层的解析器不限制浏览器端使用可以支持Angular、React等不同前端框架也可以在GUI层面做解析。支持按type自定义渲染解析器可以快速识别未完全闭合的markdown语法输出对应内容的type开发者可以针对不同type指定不同的渲染器实现差异化渲染。TUI场景适配验证演讲者最近开发的View TUI项目也使用了该解析器性能表现优异还可以支持流式图形数据的处理。项目落地与致谢已落地的知名项目目前已有多个知名产品使用Markstream View包含pcode、deep check微软也在使用该项目。赞助与贡献致谢演讲者所在公司开发的agent产品也在使用该项目本次分享由该公司赞助项目的成熟离不开所有贡献者的支持。
本次分享围绕Vue框架、VoidZero工具链以及Cloudflare收购后的团队规划展开重点讨论了AI时代前端框架与工具的设计思路发布了Vue 3.6 RC、Vite 8、vite-plus等多个版本明确了后续开源与生态支持方向。AI对前端生态的影响主流框架的AI红利过去一年Vue的用量因为AI推荐翻了一倍受益于AI生成项目时主流框架语料更丰富更容易获得推荐。AI时代的框架设计思路主流框架凭借充足语料获得先发优势全新非主流框架突破用量难度更高最新的GPT-5.6、fable 5已经能实现对未训练新方案的触类旁通。大版本更新的AI体验影响Vue从v2升级到v3的大版本改动早期因为语料滞后AI会混淆新旧写法更新语料后问题解决因此框架设计优先保证API稳定性避免给AI用户带来负面影响。API设计的优先级调整AI不介意代码长度因此API设计优先保证一致性优先级高于简洁性Vue 3组合式API中保留define的完整写法不需要简化缩写更符合AI识别需求。同文件上下文对AI更友好AI偏好更少文件、更多上下文tailwind在AI时代走红的核心原因是将样式、结构、逻辑全部放在同一个文件中降低AI读取上下文的成本和Vue单文件组件的设计思路契合。Vue核心版本更新进展Vue 3.6更新方向Vue 3.6围绕性能和正确性优化保持API不变重构了响应式系统目前已经发布RC版本欢迎开发者试用。Vapor Mode性能表现Vapor Mode已经和React功能对齐在业界通用的js framework benchmark中性能已经超越Solid比Vue 2的build速度快很多是目前可用主流框架中性能最好的。响应式系统正确性优化Vue 3.4、3.5、3.6每个小版本都会重构响应式系统重构过程保证全部测试通过不会给用户带来回归问题Vue 3.6是目前唯一一个通过全部React对框架测试套件边界场景测试的框架。Vue生态更新情况核心依赖的ESM改造Pinia 4.0已经发布目前是ESM only彻底移除了CommonJS支持下一步Vite Runner 6.0也会改为ESM onlyVue core 4.0也将因为ESM改造提上议程但不会做破坏性API改动。Vue语言工具优化进展Vue语言工具团队今年清理了三百多个open issue目前只剩十几个open issue同时改进了跨分支类型推导、透传属性的类型识别等细节体验主要贡献者包括Johnson、杨俊等。社区Rust重写探索项目基于oxc用Rust重写了Vue全部工具链包括parser、formatter、type checker目前已经基本可用属于非官方项目欢迎开发者测试反馈团队成员pikas也用Rust重写了Vue的LSP支持探索不同方案。多终端渲染方案涌现最近半年涌现了多个基于Vue的多终端渲染方案包括运行在Linux上的Vue Native、运行在PSP上的Pocket JS、基于Vue的小程序渲染框架、基于Vapor Mode的Unity渲染方案、多个Terminal UI渲染方案。Vite 8核心更新完全迁移到RolldownVite 8核心更新是完全迁移到Rolldown解决了之前依赖esbuild和Rollup带来的生产环境性能问题、环境行为不一致问题由同一个团队垂直维护问题可以直接在流程层面解决。实验性支持打包模式Vite 8新增实验性的打包模式解决原生ESM开发模式下超大型应用首次加载请求过多、浏览器性能瓶颈的问题可以将模块打包为少数几个包加载该功能预计今年晚些时候稳定。VoidZero新一代工具链进展工具链能力完善目前VoidZero工具链已经趋于完善Oxlint实现了ESLint插件兼容和类型敏感检查Oxfmt实现了100%和Prettier行为一致Vitest可以替代Jesttsdown可以替代tsup整体可以简化项目的配置文件。vite-plus核心能力vite-plus是统一化工具链实现了Node版本自动管理、包管理器自动匹配、支持monorepo的任务运行器还带任务缓存功能目前已经发布beta版本全部MIT免费开源。AI时代统一工具链的价值AI开发中验证代码正确性、构建、测试会占用大量等待时间统一工具链可以压缩这部分时间将整体开发效率提升一倍以上同时减少AI的上下文消耗降低AI决策成本。Void全栈框架规划核心能力介绍Void是基于Vite的Cloudflare原生全栈部署平台添加插件即可获得全套全栈能力支持多框架自带文件路由、部分水合、Markdown页面、ISR缓存实现了从数据库到前端的全链路类型安全。开源计划调整Void原本计划商业化收购后调整规划会将框架层抽取为和Cloudflare解绑的开源项目支持部署到其他云平台今年晚些时候开源可满足企业内部快速上线全栈小应用的需求一个prompt即可完成从创建到上线。Cloudflare收购后的团队规划开源使命不变VoidZero加入Cloudflare后团队架构和工作内容几乎没有变化继续推进所有开源项目还会获得更多资源招聘更多成员支持开源开发。新生态支持公司成立收购后个人出资成立了Use Your Think公司本质类似基金会目的是给全职参与Vue生态维护的成员提供经济支持保障生态长期发展。AI时代的Markdown 渲染器https://markstream-vue-slidev.pages.dev/1传统Markdown渲染方案的问题全量解析渲染方案缺陷传统方案采用全量解析、全量替换更新的模式每次更新都会触发全量的parse和render会打断用户操作造成浏览器性能下降。早期无高亮渲染问题最早期方案用pre code标签渲染代码无语法高亮需要等待markdown标签完全闭合后才会替换DOM全量替换时CPU会被占满在GPT-3这类快模型上渲染层CPU占用会达到100%。带全量高亮渲染的问题增加全量语法高亮后使用Shiki、Monaco这类重量级高亮工具DOM层级更深全量更新成本更高主线程和内存占用会比无高亮方案更重。框架优化效果有限即使使用Vue这类带有性能优化策略的前端框架依然无法解决全量更新带来的问题最典型的问题就是代码块内的文本选中状态会在更新后丢失。Markstream View核心优化思路分层性能优化Markstream View不仅在渲染层做优化还在解析层同时做性能优化仅处理新增的尾部内容复用已稳定的历史节点同时将渲染拆分到多帧执行。极低性能占用演示demo显示流式渲染未闭合标签时主线程CPU占用率不到1%远低于传统方案。极简使用方式项目上手难度极低安装依赖后仅需要传入content参数和标识模型输出结束的final参数即可完成流式渲染配置。底层解析层的优化设计增量流式解析实现为了适配流式解析场景并处理异常边界项目底层自研了基于TypeScript的markdown解析器面向流式增量解析设计支持集成现有的focus、latin等标准工具性能优于原生方案。性能对比优势对比remark这类基于AST的解析方案自研解析器性能可达这类方案的500倍以上。全量场景也有优化该解析器不仅适配流式场景在全量markdown渲染场景也做了性能优化拆分解析任务替换原有解析器后性能会更好更快。长列表渲染优化策略可视区域优先渲染针对包含长AI对话历史的全量渲染场景项目优先保证可视区域内容的渲染。不阻塞用户交互通过合理使用if条件控制渲染所有渲染任务不会阻塞用户的交互行为。自定义组件集成能力适配业务自定义需求企业业务中存在自定义格式需求比如自定义XML格式的通知、业务自定义组件都可以轻松集成到Markstream View中。简单API实现自定义通过CSCustomer Component API只需要对应XML的type就能将流式输出的参数传入自定义组件完成自定义渲染。多框架多端适配能力底层解析器多端可用底层的解析器不限制浏览器端使用可以支持Angular、React等不同前端框架也可以在GUI层面做解析。支持按type自定义渲染解析器可以快速识别未完全闭合的markdown语法输出对应内容的type开发者可以针对不同type指定不同的渲染器实现差异化渲染。TUI场景适配验证演讲者最近开发的View TUI项目也使用了该解析器性能表现优异还可以支持流式图形数据的处理。项目落地与致谢已落地的知名项目目前已有多个知名产品使用Markstream View包含pcode、deep check微软也在使用该项目。赞助与贡献致谢演讲者所在公司开发的agent产品也在使用该项目本次分享由该公司赞助项目的成熟离不开所有贡献者的支持。
