前端食堂技术周刊第 74 期:Rspack、New in Chrome 111、重新认识 CSS 优先级、2023 静态站点生成器盘点、UX glossary

38,642 阅读3分钟

美味值:🌟🌟🌟🌟🌟

口味:碧螺知春拿铁

本期摘要

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

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

技术资讯

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

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

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

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

2. TypeScript’s Migration to Modules

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

3. New in Chrome 111

下面我们来看技术资料。

技术资料

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

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

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

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

❤️爱心三连击

1.如果你觉得食堂酒菜还合胃口,就点个赞支持下吧,你的是我最大的动力。

2.关注公众号前端食堂吃好每一顿饭!

3.点赞、评论、转发 === 催更!

透明footer.png

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

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