FE Bits 前端周周谈 Vol.2｜V8 提速 JSON.stringify 2x，Vite 周下载首超 Webpack

cos2025-08-10 23:59

更新时间期望是在每周天，若本周内容少，则可能合并到下一期作为双周刊。

推荐使用 Folo 订阅本周刊的 Quality RSS。

公众号 前端周周谈 FE Bits，点击阅读原文链接可查看原文。

建了个 QQ 讨论小群 598022684 欢迎加入，日常讨论前端技术 & 生活，也可在群里投稿自己的文章~ 随意加入，比较偏向粉丝群的性质，前期群聊不活跃也很正常。

本周刊同时也开源在 fe-bits-weekly，欢迎关注。

大家好，今天是 2025 年 8 月 10 日，星期日。

本周末我去参加了深圳的疯狂星期六，很有意思，少数派的场地非常漂亮，空调很足，而且充满了生活气息，然后听老麦讲述少数派的成长历程，了解了很多少数派的故事，大伙聊得也很开心。

我是真的觉得少数派的审美很好，网站和各种周边设计都是，非常高级～

下面进入正题～

生态与社区动态

社区动态

  • V8 团队将 JSON.stringify 性能提升两倍多，预计升级到 V8 13.8（Node 24 使用 13.6）后，Node.js 性能将大幅受益（详细解读）。
  • npm 现支持使用 OpenID Connect (OIDC) 进行 CI/CD 自动安全发布（官方说明）。
  • Deno 团队简析与 Oracle 的"JavaScript 商标"争端，并联名呼吁"释放 JavaScript"（视频摘要，公开信）。
  • 虽然与前端不相关，但是值得提一嘴的是，OpenAI 本周宣布推出两款开放权重语言模型 gpt-oss-120b 与 gpt-oss-20b，并在 8 月 7 日推出 GPT-5，将其设为 ChatGPT 的新默认模型，向 Plus、Pro、Team 以及免费层用户分阶段推送；Pro/Team 用户能选择延时推理的 "GPT-5 Thinking Pro"
  • 本周 关于沉浸式翻译的两个疑问：泄漏隐私 && 限制第三方 API，沉浸式反应快照功能引发敏感内容被索引，以及限制第三方 API 使用风波【已撤回】引发热议。
  • Cloudflare 指 Perplexity 绕过 no‑crawl 指令；Perplexity 回应称 "过度的封锁伤害所有人"。报道｜回应
  • Web Platform 更新：本期偏重 Firefox 的新特性合辑，值得关注标准落地与兼容性动向。What's new to the web platform

Chrome 139 中的新功能

New in Chrome 139，Chrome 139 现已推出，这篇文章分享了该版本的一些关键功能。阅读完整的 Chrome 139 版本说明

此版本的亮点：

ViteLand 2025 年 7 月更新摘要

What's New in ViteLand: July 2025 Recap

本文梳理了 ViteLand 生态系统在 2025 年 7 月的核心进展，涵盖 Vite、Vitest、Oxc、Rolldown 等项目的重大更新。特别预告了备受期待的首届线下 ViteConf 及全新产品 Vite+，并揭示即将上映的官方纪录片亮点，详情如下。

5 年前，当 Vite 作为一个副业开始时，谁会想到这一点？

  • Vite 7 发布，新增 buildApp hook，升级至 纯 ESM 包，要求 Node.js ≥18（因 Node.js 18 已停止维护）。
  • Rolldown-Vite 新版本支持 tsconfig 路径解析（resolve.tsconfigPaths）和开箱即用的 Yarn Plug-and-Play，性能优化启动速度提升 2.1 倍，缩短 TTI（交互时间）和冷启动时间。

得益于一些深入的 JavaScript 引擎优化技巧，Rolldown 的启动时间减少了 2.1 倍。

  • Oxlint 引入类型感知 Linting（Type-aware linting），支持 no-floating-promise 等规则，即将推出的第一个版本将包括两条规则，下一个版本将包括来自 typescript-eslint 的所有类型感知规则，无性能损耗；实验性支持 JS 自定义规则（兼容 ESLint API）。
  • Vitest 推出视觉回归测试：通过浏览器模式直接对比组件截图（Beta 版支持）；
  • napi-rs 的创建者 Brooklyn 加入 VoidZero 团队，NAPI-RS v3 发布。

有趣的动态

  1. 一个分号能带来多大的不同？ 点击了解 JavaScript 的这个经典陷阱。作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

    Mastodon 上的 Andre 让我想起了 Chris Coyier 出色的 Web 开发荣誉徽章 ，所以我现在自豪地佩戴着我的徽章："调试了一个多小时的东西，修复实际上是一个字符"

  2. 关于锚元素的 href 的冷知识 本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto:、文本片段 (text fragments) 等已知用法，更重点介绍了一些鲜为人知的技巧，例如使用 ""、. 和 ? 对当前页面进行不同方式的重载，以及它们如何处理 URL 的查询参数和哈希。此外，文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等。

文章与视频

过去 ESLint / TypeScript-ESLint 虽然类型安全性强，但大规模代码库下执行极慢。Rust 语言重写的 Biome 和 Oxlint，速度提升到秒级，但最初仅支持语法级规则，缺乏类型安全。 Biome 通过全新 Rust 实现的类型分析器（Biotype）逐步覆盖类型规则，但实现难度高且与 TypeScript 官方存在行为偏差风险； Oxlint 则正在采取不同的赌注：等待官方 TypeScript 编译器变得更快。Oxlint 采用与 TypeScript 官方保持一致的 Go 端口 tsgo，并通过 tsgolint 实现与 typescript-eslint 完全一致的 40 条类型规则，且性能提升明显。

文中追踪社区方案、开发进展及主要作者观点，认为 Oxlint 的技术路线更具前景，最终或将以极快速度和官方一致性替代当前混合 linting 方案。

CSS 新特性

  • Infinite Marquee Animation using Modern CSS：使用 CSS 动画实现无限滚动 Logo 动画，无需额外 JS 与重复 HTML。
  • CSS if() 条件样式函数实用指南：详细介绍全新 CSS if() 条件函数用法，对比从前经典的条件处理技巧，这一函数为 CSS 带来了原生的条件样式能力，极大简化了以往通过媒体查询、自定义属性等方式实现条件逻辑的复杂性。
  • 通过滚动驱动的 CSS 动画重新实现经典视差效果 本文详细介绍了如何利用新兴的 CSS 滚动驱动动画技术，以纯 CSS 的方式重新实现经典的视差滚动 (Parallax) 效果。与传统 JavaScript 方案相比，纯 CSS 将动画移出主线程运行，提升性能和流畅度。文章通过实例讲解了 animation-timeline 属性的两种核心时间轴函数 scroll() 和 view() 的使用场景与区别，并进一步介绍了如何使用 animation-range 属性精确控制动画的触发时机与范围。

工具与库更新

工具与趣站

  • CSS-only 轮播图库：展示 CSS 轮播规范及纯 CSS Demo 站点，为无 JS 场景提供灵感资源。
  • AwesomeIndex：一个聚合搜索工具，它能让开发者一次性搜索数百个 GitHub 上高质量的 "Awesome" 精选列表。这些列表包含了各种主题下的优质资源、工具和学习资料，AwesomeIndex 将这些分散的宝贵信息集中起来，极大地提高了查找和发现特定领域资源的效率。
  • Kibo UI：Kibo UI 是一个基于 shadcn 的扩展组件库，开箱即用，shadcn/ui 专注于包装 Radix UI 中的原语，而 Kibo UI 则被设计为一个更全面的组件库，可用于构建更复杂的应用程序。（PS：其作者将其中的 AI 组件捐赠给了 Vercel 来创建 AI Elements 组件库）

嘿！我将 Kibo 的 AI 组件捐赠给 Vercel 来创建 AI 元素------我们已经投入了大量工作来改进它们，所以我绝对建议升级到 AI 元素。 大多数组件都有相同的名称，许多组件都经过升级，还有一些新的组件。我认为我们将 Input 重命名为 PromptInput，但除此之外，应该可以无缝切换！ 另外，如果您运行 npx kibo-ui add ai，它将使用 AI Elements 👍

  • smart-webapp-template 一个精心设计的 Vite + React 模板，具有精心设计的 Claude 和 Cursor 规则，展示了如何与 AI 协作构建高质量的 Web 页面。

拾一.ens18 (@oQuery)：一个好的 template 是 AI Coding 奠基，如果 ai 写的通篇都是蓝字渐变风格，真该换一个好的 template。我重新整理了一个我一直在用的 template，里面所有的设计风格、组织架构都调教完了。

  • Colored, Glowing Edge Card：Simon Goellner 制作了一个炫酷的发光卡片效果 Demo，还可以切换昼夜模式。

  • Hyprnote：一款主打"本地优先"和隐私安全的 AI 会议笔记工具，能将你的会议实时转录并智能生成摘要，确保数据绝不外泄，可接入 Ollama 本地模型和第三方 API

  • HivisionIDPhotos 一个轻量级的 AI 证件照制作算法，CPU 即可。包括智能抠图、自动排版与多规格美颜，支持多种部署形态，有 comfyUI 工作流部署等。

  • GitHub 个人主页头图生成器：主题、背景与装饰可自定义。

  • ResumePolice: 简历警察 🕵️‍♂️ 疯狂逮捕：一个开源的 AI 项目，提供"简历警察"提示词与 Dify 工作流，帮助求职者优化简历并生成面试问题。

  • SnapAI：SnapAI 是一个开源的面向 React Native 和 Expo 开发人员的 AI 驱动的图标生成 CLI。需要一个 OpenAI API 密钥来生成图标，每个图标的成本为 ~$0.04 🎥 观看视频教程

  • Liseré：Liseré 是一个轻量级且可组合的 React 组件，用于文本突出显示。它使您可以精确控制用户如何选择、注释文本以及与文本交互。适合代码文档、教程以及交互式文本突出显示和选择。

库更新

  • Node.js v22.18（LTS）默认启用 TypeScript 类型剥离，node app.ts 成为现实，就像 Bun 或 Deno 一样，不过目前它仍然是实验性功能。（版本公告)。
  • pnpm 10.14 支持直接定义并自动下载/固定 Node.js、Deno、Bun 运行时至本地项目。详情
  • Vercel 发布了 AI SDK 5，本次重大更新的核心是为全栈 AI 应用提供端到端的类型安全，尤其是在聊天交互和 Agent 功能上。
  • Shopify 发布 FlashList v2，基于 React Native 新架构的彻底重写版本，旨在解决 v1 的核心痛点。通过利用新架构的同步布局测量能力，v2 完全消除了对项目尺寸估算的依赖，从而实现了更快的加载速度、像素级精准的滚动定位和更流畅的渲染性能。
  • Apache ECharts 6.0 正式发布，带来了 12 项重大升级，旨在将数据可视化提升到新的水平。本次更新围绕三大核心维度展开：全新的默认主题、动态主题切换和深色模式支持；新增弦图、蜂群图、断轴、散点图抖动、增强的 K 线图等图表类型；引入矩阵坐标系、增强自定义系列和优化坐标轴标签。
  • NPKILL 工具（v1.0 临近）：专注 node_modules 垃圾清理，作者计划扩展至清理更多其他类型的代码"垃圾"。
  • 最小的 React 框架 Waku v0.24 版本宣布了一项重大迁移，其底层实现已转向采用 Vite 官方的 RSC 插件 @vitejs/plugin-rsc 和 Vite Environment API。

深入分析

本篇章为对感兴趣的文章或 Demo 等进行的一些详细分析～

其中有些地方使用我自己开发的 MoeCopy AI 浏览器插件进行的网页总结！开源，超轻量级，填入自己的 apikey 即可使用，还在开发阶段，欢迎尝试~喜欢的话可以给个 star！Chrome 商店 >

使 Rolldown 的启动时间减少了 2.1 倍的 PR

看到 What's New in ViteLand: July 2025 Recap 里提到的这段话比较感兴趣，去瞅了一眼。

得益于一些深入的 JavaScript 引擎优化技巧 ，Rolldown 的启动时间减少了 2.1 倍。这可以缩短交互时间，更好地为无服务器提供冷启动，并有利于您的开发服务器启动速度。

里面是这个 PR feat: use PIFE for callbacks passed to __esmMin wrapper by sapphi-red · Pull Request #5319 · rolldown/rolldown 提出了在 rolldown 打包工具中对传递给 __esmMin 包装器的回调函数应用 PIFE 优化，以提升启动时运行性能。实测结果显示，在特定项目上启动性能提升超过 2 倍，但代码体积略有增长。

PIFE？于是又翻了翻，翻到了这个 PR

feat(codegen): keep arrow function PIFEs by sapphi-red · Pull Request #12353 · oxc-project/oxc，里面提到了：

PIFE 是 "Possibly-Invoked Function Expressions" 的缩写。它是一个用括号表达式包装的函数表达式。 PIFE 对可能被急切调用（invoked eagerly）的函数进行注释。当 v8 遇到此类表达式时，它会急切地编译它们（而不是稍后编译）。有关更多详细信息，请参阅 v8 的博客文章 。

博客文章只提到了正则的 FunctionExpressions，但也支持 ArrowFunctions。将急切编译（eagerly compiled）的案例有：

  • 当 ! 出现在函数文字之前时（例如 !function(){}）
  • 当函数表达式用括号包装时（例如 (function () {}), (async function () {}))）
  • 当箭头函数用括号包裹时（例如 console.log((() => {})))）
  • 当 () 或标记模板出现在函数文字之后（仅在某些情况下）（例如 ~function(){}()）
  • 当使用显式编译提示时（例如 # allFunctionsCalledOnLoad）

在代码生成中保持 PIFE 原样将解锁优化，例如 rolldown/rolldown#5319 .

有趣的音量控制 UI Demo

本周的 CodePenSpark#462 精选了一系列以前端技术实现的音量控制 UI。

  1. 创意 UI 组件实现

    • 弹性音量开关：由 Aaron Iker 制作的 SVG 弹性音量开关，具有令人愉悦的回弹和翻转动画效果。
    • 复古音量旋钮：一个外观酷似塑料的复古圆形范围滑块，可作为音量旋钮使用。
    • CSS 音量计：Alvaro Montoro 使用纯 CSS 将原生范围输入框转换为一个带有颜色编码的动态音量计。
    • 单元素音量控件：展示了如何仅用 CSS 和原生范围滑块创建一个无需 JavaScript 的多格音量控制条。
    • 麦克风切换按钮：一个经典的、交互状态清晰且支持键盘访问的麦克风切换按钮。
    • CSS 平衡滑块：Jhey Tompkins 制作的可配置范围滑块组合，具有丰富的拉伸和增强等视觉效果选项。

  2. 交互式与实验性项目

    • 光圈科技舞会：灵感源自游戏《传送门》的动画场景，点击图标可播放音乐并观看角色跳舞。
    • SVG 声波标记实验：一个艺术性的 UI 实验，尝试用相对简单的 SVG 标记来渲染声波效果。
    • 寂静之地 - 音量控制动画：一个音频交互式动画，用户通过麦克风发声来揭示隐藏在树林中的生物。
    • 声音颜色选择器：一个独特的颜色选择器，将声音与视觉结合 (联觉 Chromesthesia)，点击不同颜色会听到对应的声音。

主要分析一下其中的这个合成音量旋钮，一个拟物风格的音量旋钮控件：旋钮跟随鼠标角度旋转，环形发光条按音量比例点亮，数字显示 00--99，同步控制 <audio> 的 volume，并带有"静音/恢复播放"的按钮。

核心技术点（视觉）

  1. 立体拟物与光晕

    • 通过多重 box-shadow + filter: drop-shadow(...) 叠加（外投影/内投影）营造金属质感与体积感。
    • .knob::before/::after 与 .slider::before、.glow::before/::after 使用伪元素堆叠，分层画出旋钮面板、内圈光环、外圈刻度等。

  2. CSS 自定义属性驱动

    • 用 --vol（0--100）作为"状态源"，在 .glow:after 的 linear-gradient 中通过 calc(var(--vol) * 1%) 控制亮起弧度。
    • --c1、--mut、--tra 控制主题色、静音色、过渡曲线，.slider:active * 动态变更色调，产生交互高亮。

  3. 刻度与环形高亮

    • .glow:before 通过一组不同角度的 linear-gradient 叠加生成刻度线；中间用径向渐变"镂空"。
    • .slider { transform: rotate(90deg) } 将整体旋转，配合 linear-gradient(-90deg, ...) 的方向，让"起点在顶部"的视觉更直观。

  4. 静音按钮纯 CSS 图形

    • .mute span:before 用 clip-path 勾出"喇叭"图形，.mute span:after 用 ≫/✖ 字符表现声波/静音，content 随类名切换。

  5. 数码管字体与发光

    • @font-face 引入 Alarm Clock 字体，.number 叠加内发光和淡色"88"遮罩，营造电子数码屏效果。

核心技术点（交互）

  1. 角度计算与旋钮旋转

    • calculateDegree(e) 用 Math.atan2 计算"指针相对于屏幕中心"的角度（注意：是相对窗口中心，而不是旋钮中心）。
    • 按住旋钮 mousedown 后监听 mousemove，实时设置 knob.style.transform = rotate(deg)。

  2. 角度到音量映射

    • 通过对 val = angle + 90 的分段处理，把整圈角度映射到 0--1 的音量值 ran，对应 --vol 与 <audio>.volume。
    • 数字显示 00--99，特意避免显示 100（if(num==100) num='99'）。

  3. 播放/暂停与样式同步

    • 点击静音按钮切换 muted 类并 play()/pause()，视觉与状态一致。

Refs

结语

周刊第二期到这里就结束啦，欢迎多多反馈纠错！

上一期结束以后我想了一想，既然要轻轻松松的氛围，那可以在文末配一些日常~

所以，晒猫时间到！

腊八喵：于 2024 年 2 月 22 日猫 の 日的时候领养的小橘白猫，因为小姐姐捡到她的时候在腊八，于是这只小可爱叫腊八~ 领养的时候还是大概5个月大 3.55kg 的小肥猫！现在都已经变成老猫了～

可乐喵：2024 年 10 月来给腊八作伴的重点色布偶公猫～那个时候还是3个月大的小猫咪。

感谢观看～

相关推荐
芥子沫2 小时前
VSCode添加Python、Java注释技巧、模板
开发语言·前端·javascript
Ares-Wang3 小时前
Node.js 》》bcryptjs 加密
开发语言·javascript·node.js
wfsm3 小时前
pdf预览Vue-PDF-Embed
前端
wangbing11253 小时前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
最爱吃南瓜3 小时前
JS逆向实战案例之----【通姆】252个webpack模块自吐
开发语言·javascript·爬虫·webpack·js逆向·算法模拟
Hurry64 小时前
web应用服务器tomcat
java·前端·tomcat
zhanshuo4 小时前
一步步教你用 CSS Grid 实现灵活又高效的瀑布流布局，适配所有屏幕！
css
zhanshuo4 小时前
深度揭秘：如何在单页应用（SPA）中完美保留路由切换滚动位置，提升用户体验！
javascript
烛阴4 小时前
Sin -- 重复的、流动的波浪
前端·webgl
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03全球最强模型Grok4，国内已可免费使用！（附教程）04🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示052025年华数杯C题超详细解题思路06KGG转MP3工具|非KGM文件|解密音频07OpenAI重返开源！GPT-OSS本地部署完全指南08Cursor 终端“卡死/无响应”问题的解法09GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南