栗子前端技术周刊第21期 - Rolldown 正式开源、TypeScript 5.4、Storybook 8...

🌰栗子前端技术周刊第 21 期 (2024.3.11 - 2024.3.17)：浏览前端一周最新消息，学习国内外优秀文章视频，让我们保持对前端的好奇心。

📰 技术资讯

Rolldown 正式开源：基于 Rust 的 JavaScript 打包工具 Rolldown 正式开源。Rolldown 的重点是性能，将会尽力与 Rollup API 兼容，目标是在对用户影响最小的情况下，在 Vite 上切换到 Rolldown。Rolldown 目前正在积极开发中，处于早期阶段，还不能用于生产。
TypeScript 5.4 发布：TypeScript 5.4 正式发布，新增了一些小功能，包括一个新的 NoInfer 实用类型。

ts 复制代码

function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
    // ...
}

createStreetLight(["red", "yellow", "green"], "blue");
//                                            ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.

Storybook 8 发布：这个广受欢迎的前端组件开发工具引入了内置可视化测试、对 React Server Components 的支持、快达 50% 的启动时间、对 Vite 5 的支持以及升级的 Vue 和 React 组件自动生成功能。
Shiki 1.0：功能强大的语法高亮 - 这是一款基于 TextMate 语法和主题的语法高亮器，与 VS Code 使用的引擎相同。

js 复制代码

import { codeToHtml } from 'shiki'

const code = 'const a = 1' // 你的代码
const html = await codeToHtml(code, {
  lang: 'javascript',
  theme: 'vitesse-dark'
})

console.log(html) // 高亮的 html 字符串

📒 技术文章

5 Exciting New JavaScript Features in 2024：本文将探讨预计将于 2024 年推出的一些最令人兴奋和最令人期待的 JavaScript 功能，包括新一代日期时间 API Temporal、正则 /v 标志等等。
一文搞懂 JavaScript 模块化：本文梳理 JavaScript 模块化的历史和现状，不仅介绍不同模块系统是什么，而是深入介绍不同模块系统诞生的原因和解决的问题，阅读本文将为你解开很多 JavaScript 模块化的疑惑。
「查缺补漏」HTTP 缓存：文章针对 Cache-Control HTTP 通用首部字段进行介绍和实践。

🔧 开发工具

React Geiger：聆听 React 性能问题的一种方法，Geiger 提供了一种有趣的方法，通过在运行时间超过预期时发出咔嗒声（类似于 Geiger 计数器），让 React 性能变得可闻。官方提供了一个 DEMO 可供体验。

cmdk：快速、可组合的"命令菜单"组件 - 主页上有一些风格各异的示例。

Capo.js：五分钟提升网络性能？- Capo.js 旨在帮你将 <head> 中的元素排列整齐，从而提高性能。

🚀🚀🚀 以上资讯文章选自常见周刊，如 JavaScript Weekly 等，周刊内容也会不断优化改进，希望你们能够喜欢。

💖 欢迎关注微信公众号：栗子前端 💖