关于javascript:前端食堂技术周刊第-74-期RspackNew-in-Chrome-111重新认识-CSS-优先级

1次阅读

共计 1379 个字符,预计需要花费 4 分钟才能阅读完成。

美味值:🌟🌟🌟🌟🌟

口味:碧螺知春拿铁

  • 食堂技术周刊仓库地址: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

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

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

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

正文完
 0