栗子前端技术周刊第 53 期 - Svelte 5、CSS 2024 状态调查结果、Next.js 15...

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

📰 技术资讯

Svelte 5：经过近 18 个月的开发，包括数十位贡献者的数千次提交，Svelte 5 终于发布。和 React、Vue 一样，Svelte 也是一个前端框架，不过 Svelte 的特点是把运行时的虚拟 DOM 之类的工作移到了编译时。此次更新内容包括：引入 runes 来管理响应式、编译器提升、引入了 snippets 支持在组件中定义可复用的逻辑代码等等。

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

<p>Click doubled: {doubled}</p>

CSS 2024 状态调查结果：Sacha Greif 指出，2024 年可能会成为经典 CSS 和 “新 CSS” 之间的转折点，因为近年来推出的许多新功能和工具现在已经得到了浏览器的广泛支持，更重要的是，使用率也达到了一定水平。
Next.js 15 发布：Next.js 15 正式发布，同时 Next.js Conf 2024 上的所有演讲也已结束。该版本内容包括一个用于简化升级的 codemod CLI、异步请求 API、与 React 19 对其等等。
Express v5：一个月前 github 上有 Express v5 的发布信息，现在官方正式发布了关于 v5 版本的文章，文中整理了许多未完成的工作，并解释了大致的计划。目前，v5 被认为是一个边缘版本，在安全和整体流程方面仍需努力，但总体进展顺利。
React Native 0.76：React Native 的重大版本，版本内容包括默认启用新架构、提供了 React Native DevTools 的首个稳定版本、更快的 Metro 解析器等等。

📒 技术文章

Meet the New Safe Assignment Operator (?=) in JavaScript：认识 JavaScript 中的新安全赋值操作符 (?=) - 涉及异步操作和错误处理的时候，通常会使用 try-catch 和 async-await 来处理，现在有了新的安全赋值操作符 ?=，它可以大大简化错误处理并提高了代码的可读性。

const [error, data] ?= await fetchData();

前端部署后自动提醒用户更新：前端项目经常碰到更新部署了，但是更新过的功能并没有及时的展示，还需要刷新一下页面，才能看到最新的内容。针对此问题，文中介绍了三种前端部署后自动提醒用户更新的方法。
一份完整的「前端性能优化」手册：在这篇文章中，作者将带大家深入探讨前端性能优化的各个方面，包括但不限于衡量性能指标、编程技巧、资源加载、代码分割、懒加载、缓存策略等。

🔧 开发工具

Fetch Mock 12.0：fetch-mock 是模拟 fetch API 请求的库，支持浏览器和 Node 端。

import fetchMock from 'fetch-mock';
fetchMock.mockGlobal().route('http://example.com', 200);
const res = await fetch('http://example.com');
assert(res.ok);

eslint-plugin-functional：ESLint 插件，帮助你编写不可变数据式代码和函数式编程。

route-list：显示 Express/Koa/Hapi/Fastify 路由的 CLI 工具- 如果你有一个基于 Node 的应用，并希望以一种优雅的方式查看其所有路由，这里有一个选择。

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

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