前端食堂技术周刊第 74 期：Rspack、New in Chrome 111、重新认识 CSS 优先级

美味值：🌟🌟🌟🌟🌟

口味：碧螺知春拿铁

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

本期摘要

• 字节跳动自研 Web 构建工具 Rspack 正式发布
• TypeScript’s Migration to Modules
• New in Chrome 111
• 重新认识 CSS 优先级
• 2023 静态站点生成器盘点
• Sandworm Audit
• Mrm
• UX glossary

大家好，我是童欧巴。欢迎来到前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1. 字节跳动自研 Web 构建工具 Rspack 正式发布

天下苦 Webpack 久已，Rspack 闪亮登场，如下是社区对 Rspack 的积极响应：

• 与 Webpack 官方正式确立合作关系
• Nx 内置 Rspack 作为官方构建方案之一
• unplugin 添加对 Rspack 的实验性支持
• vue-rsloader
• Gatsby 发布了 gatsby@alpha-rspack 版本
• Netlify 表示接入 Rspack 后，有 300%~500% 的本地启动、构建性能提升

与 Turbopack 更加激进的路线相比，Rspack 选择了与 Webpack 生态兼容的路线。

这让我们想起 Deno 和 Bun 的初期路线也是一个选择激进，一个选择兼容，后来 Deno 还是做出了妥协，那么 Turbopack，接下来轮到你发言了。：）

2. TypeScript’s Migration to Modules

TS 5.0 将源码迁移到 ESM，npm 包体积减小 46%，构建时间缩短 10-25%。

• 具体实施的 PR Convert the codebase to modules

3. New in Chrome 111

• View Transitions API
• CSS Color Level 4
• New color devtools

下面我们来看技术资料。

技术资料

1. 重新认识 CSS 优先级

• 继承优先级最低，层级越深优先级越高

• 优先级顺序如下，从高到低

  • Transition 过渡声明
  • 设置了 !important 的浏览器内置样式
  • 设置了 !important 的用户设置样式
  • @layer 规则中的 !important 样式
  • 开发者设置的 !important 的 样式
  • animation 动画
  • 开发设置的 css
  • @layer 规则样式
  • 用户设置的样式
• 级联每层级中的优先级：内联 > ID > 类、伪类、属性选择器 > 标签 > 通配符 、功能伪类(不带参数，where 除外)

2. 2023 静态站点生成器盘点

• 测评框架：Astro、Eleventy、Enhance、Gatsby、Next.js、Nuxt、Remix、SvelteKit
• 测评内容：install 时间、客户端 JS 尺寸、node_modules 尺寸、npm audit、Telemetry

3. Sandworm Audit

一个免费、开源的命令行工具，适用于所有现代 JavaScript 包管理器。它能够扫描项目和依赖项，检测漏洞、许可证以及其他问题。支持自定义许可证策略，生成依赖项的 SVG treemap 图表，支持 JSON 输出结果。

4. Mrm

为你项目的配置文件提供配置模版，包括 ESLint、Prettier、lint-staged 等。

5. UX glossary

一个包含用户体验概念的合集，每个概念都提供了图文示例进行讲解。

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。