前端技术月刊-2025.7

96 阅读12分钟

字节发布基于 Rspack 的测试框架 Rstest,与构建工具链深度集成形成完整开发解决方案;尤雨溪公司推出 Oxlint 1.0,性能比 ESLint 快 50-100 倍的 Rust 驱动代码检查工具;Vite 7.0 重大更新引入 Rolldown Rust 打包器并全面转向 ESM 模块;React Native 0.80 升级至 React 19.1.0 并引入严格 TypeScript API,iOS 构建速度提升 12%。Node.js 官方发布 Amaro TypeScript 解析器,基于 SWC WebAssembly 支持类型剥离;滴滴开源 Dimina 跨端小程序框架,支持四大平台;ECharts 6.0 Beta 带来全新主题和 20+ 特性;Vitest 3.2 改进浏览器模式并新增注解 API。跨端开发方面,京东通过 Taro on Harmony 实现鸿蒙"原生级"性能,腾讯视频基于 Compose Multiplatform 推出首个鸿蒙全跨端 APP,B 站采用 KMP 技术结合 Bazel 构建系统实现三端业务落地。工程效能上,得物构建自动化测试体系将前端自测率从 15.35% 提升至 24%,Ant Design Form 从 HOC 演进至 Hooks 架构优化性能。当前呈现 Rust 工具链崛起、鸿蒙生态成熟、TypeScript 增强和 AI 驱动开发四大关键趋势,为前端开发带来性能优化、跨平台能力提升和智能化开发新机遇。

业界资讯

字节发布 Rstest,由 Rspack 驱动的测试框架

Rstest 是基于 Rspack 生态的测试框架,为 Rspack 项目提供全面支持,与 Rspack 工具链(如 Rsbuild、Rslib 等)深度集成,形成完整的 JavaScript 开发解决方案。该框架作为开源 MIT 项目,由字节跳动维护,能显著提升 Rspack 项目的测试效率和开发体验。对于大前端研发,可结合 Rspack 生态工具链(从构建 Rsbuild 到测试 Rstest)打造高性能的一体化开发流程,尤其适合需要兼容 webpack 又追求 Rust 高性能的项目场景,建议在需要优化构建性能的新项目中优先评估该技术栈。

尤雨溪公司宣布推出 Oxlint 1.0,比 ESlint 快50-100倍!

Oxlint 1.0正式发布,作为基于 Rust 的 JavaScript/TypeScript 代码检查工具,其性能比 ESLint 快50-100倍,支持500+条 ESLint 规则,已被 Shopify、Airbnb 和梅赛德斯-奔驰等企业采用。关键优势包括:零配置开箱即用、兼容 ESLint 配置迁移、多线程分析(实测26万文件仅需22.5秒)、清晰的错误诊断和主流编辑器支持。对于大前端团队,建议将 Oxlint 作为 CI/CD 流程中的首选静态检查工具,结合 eslint-plugin-oxlint 实现平滑迁移,并关注其即将推出的 JavaScript 自定义规则功能,这为团队定制代码规范提供了新的技术选型方向。

Node.js 官方发布新工具 Amaro,TypeScript 支持!

Amaro 是 Node.js 团队开发的基于 SWC WebAssembly 的 TypeScript 解析器封装工具,主要用于类型剥离(Type Stripping)场景。它提供了稳定的 TypeScript 解析 API,允许用户独立于 Node.js 内部版本使用最新 TypeScript 转译器,支持通过 transformSync 函数进行类型擦除并保留堆栈跟踪,还能作为外部加载器直接执行 TS 文件。在 monorepo 场景中,配合--conditions 标志可直接引用 TS 源码文件,显著提升开发效率。当前支持 TypeScript 5.8版本,采用 MIT 许可协议。 对于大前端研发,Amaro 的 WASM 架构和类型剥离能力可以探索与前端构建流程结合,如在开发环境实现 TS 文件的直接运行调试,或与 Vite/Rollup 等工具链集成优化构建性能,特别是在 monorepo 架构下可尝试替代部分 TS 编译步骤来加速 HMR 热更新。

React Native 0.80 正式发布

React Native 0.80版本带来多项重要更新:升级至 React 19.1.0,引入更严格的 TypeScript API(Strict TypeScript API),并正式冻结旧架构(Legacy Architecture),未来将逐步淘汰。新版本还优化了 JavaScript API 的稳定性,弃用深导入(deep imports),并通过预构建 iOS 依赖项显著提升构建速度(约12%)。Android 应用体积也因 IPO 优化减少了约1MB。对于大前端研发,建议尽早迁移至新架构并采用 Strict TypeScript API 以获得更好的类型安全和性能,同时可探索 iOS 预构建方案优化 CI/CD 流程。这些改进为 React Native 应用的稳定性、性能和开发体验带来显著提升。

滴滴开源全新跨端小程序框架 星河 (Dimina)

Dimina 是滴滴开源的轻量级跨端小程序框架,支持 Android、iOS、Harmony 和 Web 四大平台,提供高性能、跨平台、低门槛的开发体验。其技术特性包括资源离线化、逻辑视图分离、原生能力封装和页面预加载,通过 DMCC 编译器将小程序语法转译为 Vue 语法,并基于 Vue 构建视图渲染框架。对于大前端研发,可以探索将 Dimina 作为跨端开发解决方案,利用其统一 API 和预加载机制优化性能,同时结合 Vue 生态快速开发小程序应用,并通过贡献代码完善框架功能。

Vite 7.0 正式发布

Vite 7.0正式发布,标志着这个前端构建工具在5年内已成长为每周3100万次下载的核心基础设施。本次重大更新包含多项突破:1)Node.js 支持升级至20.19+/22.12+,全面转向 ESM 模块;2)默认浏览器目标调整为"baseline-widely-available",提升跨浏览器兼容性;3)引入 Rolldown Rust 打包器(通过 rolldown-vite 包可用),显著提升大型项目构建速度;4)实验性 Environment API 新增 buildApp 钩子,强化插件开发能力。Vite 生态也在快速发展,包括10月将举办首届线下 ViteConf 大会,以及 VoidZero 与 NuxtLabs 合作开发的 Vite DevTools 调试工具。对于大前端研发,建议重点关注 Rolldown 的构建性能优化潜力,以及 Environment API 为框架集成带来的新可能性,同时及时更新浏览器兼容策略以适应新的 baseline 标准。

Electron 37 正式发布

Electron 0.37版本带来了 Chrome 49的核心升级,包括 CSS 自定义属性、增强的 ES6支持、KeyboardEvent 改进等新特性。CSS 自定义属性支持 JavaScript 动态修改,提升了界面开发的灵活性;新增的 KeyboardEvent.code 属性使快捷键实现更准确;Promise 拒绝事件和 ES2015特性(如默认参数、解构赋值)进一步简化了代码。对于大前端开发,这些特性可以用于构建更动态、响应式的用户界面,尤其是 CSS 变量与 JS 联动的能力,为主题切换、状态管理等场景提供了新思路。Electron API 的增强(如暗黑模式检测、窗口事件)也为跨平台桌面应用开发带来了更多可能性。

JSNation 会议2025年度奖项

2025年 JSNation 会议将举办第七届 JS 开源奖项,聚焦 JavaScript 生态创新项目,包括 Skip 声明式后端框架、Rolldown Rust 打包工具、Transformers.js 浏览器端机器学习等突破性技术。这些工具在大前端研发中可落地应用:如使用 Rust 工具链提升构建性能,浏览器端 AI 降低服务依赖,以及声明式框架简化全栈开发。会议还表彰了提升开发效率的生产力工具(如 Zod 类型验证、Farm 极速构建工具)和 AI 驱动项目(如 Micro-Agent 代码生成、BrowserAI 浏览器 LLM),为开发者提供了现代化技术栈的实践方向。社区奖项则突出了全球 JS 技术社群的活跃交流。这些创新成果为大前端研发提供了性能优化、AI 集成和开发体验提升的新思路。

Apache ECharts 6.0发布

ECharts 6.0.0-beta.1版本带来了多项重要更新,包括全新主题设计、和弦图系列支持、矩阵坐标系布局、可复用自定义系列、笛卡尔坐标系防溢出机制、散点图抖动效果、轴断点功能等20+新特性,同时修复了标签样式继承、数据缩放、热力图标签显示等15+问题。该版本存在4项破坏性变更:默认主题样式变更、笛卡尔坐标轴位置微调、geo/series.map 等组件的百分比基准修正,以及富文本样式继承逻辑调整。对于大前端开发者,建议重点关注可复用自定义系列和矩阵坐标系功能,这为复杂数据可视化场景提供了更灵活的解决方案,可探索将其与 React/Vue 等框架深度集成,或结合 AI 生成图表配置的能力来提升开发效率。

Vitest 3.2 版本正式发布!

Vitest 3.2版本主要改进了浏览器模式和 TypeScript 支持,同时引入多项新功能:废弃 workspace 配置改用 projects 简化配置;新增 Annotation API 用于测试标注;支持 Scoped Fixtures 定义作用域;提供自定义项目名称颜色功能;扩展浏览器定位器 API 增强测试灵活性;支持显式资源管理自动清理 mock;新增测试信号 API 处理中断场景;优化覆盖率报告性能;新增 watchTriggerPatterns 选项控制测试重跑逻辑;统一 Matchers 类型扩展;新增 sequence.groupOrder 控制多项目执行顺序。这些改进为前端测试提供了更强大的工具链,特别是浏览器测试和 TypeScript 支持方面的增强,建议前端团队重点关注 Custom Browser Locators API 和 Test signal API,可结合现代前端框架的组件测试场景进行深度集成,同时利用新的 Matchers 类型系统扩展自定义断言,提升测试代码的类型安全性和可维护性。

技术点精读

鸿蒙

Taro on Harmony:揭秘京东鸿蒙版如何做到"原生级"性能体验

京东通过 Taro on Harmony 方案实现了鸿蒙原生应用的"原生级"性能体验,该方案基于鸿蒙 CAPI 构建,将 React DSL 直接对接到 C++侧运行渲染管线,支持多线程架构和动态更新能力,显著降低开发门槛并提升性能。对于大前端研发,可探索将现有 Taro 项目快速迁移至鸿蒙生态,同时借鉴其多线程架构和 C++渲染优化思路来提升跨端应用性能,未来可关注 React C++化和自研布局引擎等方向进一步优化渲染效率。

鸿蒙平台首个全跨端 APP ——腾讯视频 ovCompose 框架发布

腾讯视频团队基于 Compose Multiplatform 推出 ovCompose 跨平台框架,成功实现 Android/iOS/鸿蒙三端一码开发,成为鸿蒙平台首个全跨端 APP。该方案通过 Kotlin Native 适配鸿蒙、Skia 三明治架构解决混排问题、iOS 多模态渲染优化等技术创新,在保持原生性能的同时显著提升开发效率。配套开源的 KuiklyBase 基础库提供组件生态、内存优化等能力,已在腾讯系10+款 APP 落地。对于大前端研发,该方案为跨端开发提供了新思路:可探索 Compose Multiplatform 结合自研渲染优化的技术路线,重点关注 GC 性能优化、多端一致性保障等方向,同时结合业务场景选择原生渲染或自渲染方案。

B 站在 KMP 跨平台的业务实践之路

B 站通过 KMP 技术实现了跨平台业务实践,采用 Share Logic 和 Share UI 模式在三端落地,并基于 Bazel 构建系统实现多语言混编和分模块导出等创新功能。文章重点介绍了 KMP 在私信业务中的实际应用,通过状态机实现的单向数据流、函数式编程和依赖注入等技术方案,解决了跨平台开发中的复杂业务逻辑处理和多端协作问题。对于大前端研发,可以借鉴 B 站的 KMP 工程实践,探索基于 Bazel 构建系统的跨平台开发方案,结合状态机和函数式编程思想提升代码复用率和可维护性,同时关注 KMP 与原生平台的交互范式优化。

其它

得物研发自测 & 前端自动化测试体系建设

得物通过构建前端自动化测试体系(代码覆盖率检测+E2E 测试)解决了研发自测置信度低的问题,实现了准入覆盖率78.58%、准出覆盖率87.06%的显著提升。该体系通过插桩技术实时监控代码执行,结合需求/人员维度报告和流水线卡口机制,形成质量保障闭环,最终推动前端研发自测率从15.35%提升至24%。对于大前端研发,可借鉴其分层测试策略:1)使用 babel-plugin-istanbul 实现轻量级代码插桩;2)将覆盖率平台与 CI/CD 流程深度集成;3)探索 AI 生成测试用例等智能化方向,实现从人工验证到自动化防御的效能升级。

探索 Ant Design Form 的实现原理——从 HOC 到 Hooks

本文深入剖析了 Ant Design Form 从3.x 到4.x 版本的架构演进,从 HOC 高阶组件模式到 Hooks API 的转变。3.x 版本通过 HOC 实现状态提升和逻辑复用,但存在性能缺陷和组件嵌套问题;4.x 版本采用 FormStore+发布订阅模式,结合 Context 实现跨组件状态共享,通过细粒度更新优化性能。这种演进体现了 React 生态从类组件到函数式组件的范式迁移,为解决复杂表单场景提供了更优雅的方案。对于大前端开发,可借鉴其设计思想:在 AI Coding 场景下,可基于 Hooks+Context 构建可复用的智能表单组件库,结合 LLM 实现动态表单生成与校验;同时其发布订阅模式对实现低代码平台的组件联动具有参考价值,值得在可视化搭建系统中实践探索。


微信搜索“好朋友乐平”关注公众号。

github原文地址