关于javascript:前端食堂技术周刊第-74-期RspackNew-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

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

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

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