栗子前端技术周刊第 32 期 - Million Lint 1.0-rc、Rspack 0.7、Astro 4.9...

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

📰 技术资讯

Million Lint 1.0-rc：Million Lint 发布了 v1.0 RC 版，可自动查找并修复 React 性能问题。

Rspack 0.7：Rspack v0.7 已发布，这是 Rspack v1.0 之前的最后一个小版本。在此之后，Rspack 团队将集中精力开发 v1.0，并争取尽快推出 Rspack v1.0 alpha 版本。v0.7 版本支持懒编译、更快的 CSS 生成等。

Astro 4.9：Astro 4.9 刚刚发布，其中包括对 React 19 的支持，实验性的 Container API，稳定之前部分实验功能。

📒 技术文章

Sneaky React Memory Leaks：不易察觉的的 React 内存泄漏 - 作者在开发 React 应用时遇到了一个复杂的内存泄漏问题，它是由 JavaScript 闭包和 React 的 useCallback Hook 共同造成的，文中就一步步解析内存泄露是如何产生的。

Visualize Your Website's Render-Blocking Scripts：影响网页性能的因素很多。其中一个关键因素是网页加载的资源，如脚本和样式。资源过多或下载速度过慢都会导致用户体验不佳。本篇文章将介绍渲染阻塞脚本对网页的影响，以及如何使用 DevTools 和网站性能监控工具 DebugBear 检测此类渲染阻塞脚本。

前端服务监控原理与手写开源监控框架SDK：前端监控的目的很明确，无非就是让我们的产品更完善，更符合我们和用户的需求。一个完整的前端监控平台至少需要包括三个部分：数据采集与上报、数据整理和存储、数据展示。算上需要监控的项目的话，也就是说，至少需要 4 个项目才能完整的记录前端监控的内容...

🔧 开发工具

Fontsource：Fontsource 是一系列开源字体的集合，这些字体被打包成独立的 npm 包，你可以在官网选择字体后将对应字体包引入项目使用。

// 安装字体包
npm install @fontsource/open-sans

// 引入字体
import "@fontsource/open-sans"; 
import "@fontsource/open-sans/500.css";
import "@fontsource/open-sans/900-italic.css";

// 使用字体
body {
 font-family: "Open Sans", sans-serif;
}

jessquery：jessquery 对 DOM API 进行了一个轻量级地封装，它的 API 像 jQuery 那样的直观优雅，同时又针对现代 web 进行了精简，gzip 压缩后的大小仅仅 3.76kb。

const fadeIn = [{ opacity: 0 }, { opacity: 1 }]
const fadeOut = [{ opacity: 1 }, { opacity: 0 }]
const animatedText = $$(".animated-text") // $$ ≈ querySelectorAll, $ ≈ querySelector

animatedText
  .addClass("special")
  .wait(1000) 
  .toggle("hidden")
  .text(
    `<p>
      In two seconds, every element matching the 'animated-text' class
      will fade in and out twice then disappear.
    </p>`
  )
  .wait(2000)
  .transition(fadeIn, 1000)
  .transition(fadeOut, 1000)
  .transition(fadeIn, 1000)
  .transition(fadeOut, 1000)
  .purge()

Regexper：将 JavaScript 正则表达式显示为铁路图 - 这在学习正则表达式或遇到复杂的正则表达式却不知道其作用时可能会很有用。

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

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