Skip to main content

2024/02/04

chrome 121​

Element Capture API 开始实验，支持捕获并跟踪记录一个特定的 HTML 元素，可以参见下面的动图

element-capture-demo

// 会先请求用户授权捕获
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// 通过 RestrictionTarget 关联需要跟踪记录的 html 节点
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
// 将录制的视频流限制在特定的 html 节点上
await track.restrictTo(restrictionTarget);

Speculation Rules API 更新，以编程的方式告诉 Chrome 哪些页面需要进行预渲染，通过减少页面导航时间，创建更好的用户体验

css 方面新增了 scrollbar-color 和 scrollbar-width 属性，可以更方便地修改滚动条的颜色和宽度

Rspack​

Rspack 家族又新增了一员：Rsdoctor。至此，Rspack 家族目前已经拥有了 4 个成员：

  • Rspack。基于 Rust 的打包工具
  • Rsbuild。基于 Rspack 的 Web 构建工具，是一个增强版的 Rspack CLI，更易用、更开箱即用，提供了从 Webpack 到 Rspack 的 顺畅迁移方案
  • Rspress。基于 Rspack 的静态站点生成器
  • Rsdoctor。用于诊断和分析 Rspack 或 webpack 项目的构建情况，包括 loader 耗时、产物大小等，还提供了防止代码劣化的 Bundle Diff 功能

有国产 pack 挺不错的，不让 turbopack 一家独大对咱们开发者而言也是好事，期待更多的生产实践吧

2024 怎么新建 SPA 应用​

目前呼声最高的应该是 Vite + React-ts，也可以基于 Next.js 创建，两者都减少了 bundle 的耗时，开发体验都不错，字节新出的基于 Rust 的 Rspack 能否支持新建 SPA？理论上应该是支持的，后面找个时间研究下这个话题。至于 webpack5，似乎得想办法接入这些新的工具，目前看来有点跟不上时代了