大家好，这里是大家的林语冰，您现在收看的是 2023 年第 42 周前端生态的技术周报（视频教程请临幸 B 站解说）。
前端头条
ViteConf 2023 大会上周圆满落幕，其中一个热点是尤雨溪先生分享的关于 Vite 的最新技术发展路线。
据悉，目前 Vite 生产环境的打包构建依赖于 Rollup ------ 一个类似于 Webpack 的打包构建工具。但是前端已死，JS（JavaScript）在前端工具链领域处于食物链底端，性能方面惨遭 Go、Rust 等语言生态降维打击。
Vite 目前正和其他技术团队合作，试图用 Rolldwon 打败 Rollup，用 Rust 取代 JS，从而获得更快的生产构建性能。目前这是 Vite 的下一个"五年计划"。
如果您对 Vite 生态的现状和未来感兴趣，可以观看尤雨溪先生的演讲。（油管搬运请临幸 B 站双语版）。
Angular 和 Qwik 之父 Misko Hevery 是 builder.io 的 CTO，这位大佬最近在 JS 国际大会发表了一次演讲。
这位大佬科普了主流 JS 框架的响应式原理，认为 Angular 和 React 是粗粒度的响应式处理，而 Svelte、Quick 和 Solid 则是细粒度的响应式处理，Vue 则位于平衡之间。这位大佬还预言了前端框架的下一个战场在于框架的启动性能。
如果您对主流 JS 框架的响应式原理感兴趣，可以观看本次演讲。
Firefox 浏览器最近修复了一个诞生于 22 年前的工具提示 bug......
如果我们 35 岁退役，那 13 岁就得开始打工，否则根本没机会修复这种拖延症晚期的 bug。
版本公告
pnpm 是一个多快好省的软件包管理器，可以对 npm 和 yarn 等软件包管理器降维打击，UP 主用过都说好。
pnpm 8.9 正式发布，现在允许运行安装脚本的软件包列表可以在单独的配置文件中提供，并且提高了性能。
如果您对 pnpm 最新的版本公告感兴趣，可以临幸官网。
Electron 是一个使用 JS、HTML 和 CSS 构建跨平台桌面 App 的框架，它提供技术支持的产品包括但不限于 VSCode、GitHub 桌面 App 等。
Electron 27 正式发布，升级到 Node.js 18.17.1，不再支持 macOS 10.13 和 macOS 10.14。
如果您对 Electron 最新的版本公告感兴趣，可以临幸官网。
Solid 是一个用于创建用户界面的声明式 JS 库。它不使用虚拟 DOM，而是将其模板编译为真实的 DOM 节点，并使用细粒度的响应来更新它们。Vue 3 Vapor Mode（蒸汽模式）的灵感正是来源于 Solid。
Solid 1.8 正式发布，版本代号是北欧神话的彩虹桥，主要更新包括但不限于：
- 流序列化去重
- 改善 Hydration（水化）
- 更小的模板
如果您对 Solid 最新的版本公告感兴趣，可以临幸官网。
最佳实践
Tailwind CSS 非常敏捷且易用，是一个强大的、人气爆棚的工具人。虽然但是，随着 App 体积激增，类选择器的列表也会暴走，降低可维护性。
这位大佬科普了防止 Tailwind CSS 暴走的 5 个最佳实践，帮助你编写可维护的 CSS：
- 尽量少用工具类
- 设计单元分组，命名语义化
- 保持类的有序性
- 最小化打包构建
- 重构时保持一致
如果您对 Tailwind CSS 的最佳实践感兴趣，可以参阅此博客。
所谓"聚合文件"（barrel file），指的是仅仅为了导入某些模块然后再将其导出的"高阶文件"，打个比方，聚合文件类似于文件的集装箱。
聚合文件可以降低项目的维护成本，虽然但是，聚合文件也是大型项目运行缓慢的罪魁祸首之一。
这位大佬科普了聚合文件对于项目打包构建等方面的性能影响，并建议尽量少用聚合文件。
本文是"加速 JS 生态系列"的博客之一，如果您对 JS 生态的性能优化感兴趣，可以参阅本系列的博客。
Cloud Four 团队最近在讨论 CSS 嵌套与 Sass 嵌套的异同点。
新手写 CSS 时，一般会无脑嵌套（比如这位 UP 主）。虽然但是，CSS 嵌套会增加差异化和维护成本，比如滥用 !important 等奇技淫巧。
社区孵化了若干模块化 CSS 命名约定，比如 BEM 方法论 ------ 即 Blocks-Elements-Modifiers（块-元素-修饰符）的命名约定，比如 .button--x-large，有时可以减少 CSS 嵌套。
大佬建议尽量避免 CSS 嵌套，并且科普了使用 CSS 嵌套的最佳 timing。
如果您对编写可维护的 CSS 感兴趣，可以参阅此博客。
所谓 CDN，顾名思义即"content delivery network（内容交付网络）"，它是一个连接的计算机网络，这些计算机遍布全球，可以存储相同文件的副本，当用户请求特定文件时，可以根据最近的计算机向用户提供服务。
举个栗子，当您在岛国请求动作片时，可以通过 CDN 就近访问岛国本地的服务器，而不是"曲线救国"向 B 站请求远程服务。
这位大佬科普了诉诸 CDN 减少请求的传输距离，实现更快的请求，通过减少延迟来提高性能。
如果您对构建更快的网站服务感兴趣，可以参阅此博客。
前端百宝袋
audioMotion-analyzer（音频频谱分析仪）是一个高分辨率的实时音频频谱分析仪 JS 模块，它没有其他依赖，只有 25 kb 大小。
audioMotion-analyzer 旨在成为外观最佳、精度最高、可定制性最强的频谱分析仪，基本采用小尺寸和高性能封装。
如果您对音频频谱分析感兴趣，可以临幸官网。
fontend footer 是一个画廊网站，该网站专门收集各种设计优秀的网站页脚。
如果您有网站页脚的设计需求，可以临幸官网的页脚资源。
Highlight.js 是用 JS 编写的语法高亮器。它可以在浏览器和服务器上工作。它可以处理几乎任何标记，不依赖于任何其他框架，并具有自动语言检测。
Highlight.js 目前支持 192 种语言和 248 个主题，支持 Node.js 和 Deno，兼容所有 JS 框架。
如果您对语法高亮的需求感兴趣，可以临幸官网。
CSS Box Shadows Generator 是一个在线的 CSS 盒子阴影生成器，支持可视化编辑和响应式生成代码。
您可以通过可视化的手动调整盒子阴影样式，对应的 CSS 代码会根据您的操作自动生成。
如果您对在线的 CSS 低代码开发感兴趣，可以临幸官网。
高玩攻略
这位大佬科普了一个 light-dark() CSS 函数，该函数可以根据配色方案自动切换亮暗模式，诉诸一个精简的 CSS 函数就可以实现浏览器亮暗模式的需求。
目前该函数是 CSS 颜色模块 Level 5 草案的一部分，尚不稳定，但未来可期，因为一切可诉诸 CSS 赋能的刚需，终将诉诸 CSS 重构对应的 JS 功能。
如果您对 CSS 未来的 light-dark() 函数感兴趣，可以临幸 直男翻译版。
有许多人气爆棚的框架可以用来编写小型 Web App。Go 和 Node.js 是最受欢迎的选择。
据悉，Netflix（即网飞，类似于 B 站）运行在 Node.js 上； Uber（类似于滴滴打车）从 Node.js 迁移到 Go 以获得更好的性能。
这位大佬通过简单实现 Hello World 来测评不同的语言和框架的 Web 服务性能，使用基准测试来计算不同技术方案的跑分。
如果您对不同 Web 服务的性能跑分感兴趣的话，可以参阅此博客。
所谓 ReDoS，顾名思义即 regular expression denial of service（正则表达式拒绝服务），可能因此造成一些漏洞。
这位大佬科普了自己遭遇 ReDos 漏洞影响的经历。
举个栗子，在 2016 年，Stack Overflow 经历了 34 分钟的停机，在 2019 年，CloudFlare 经历了 27 分钟的停机。在每种情况下，ReDoS 都会引发一系列事件，导致全面中断。这两起事件都不是由于任何恶意行为，只是一些正则表达式，没有人预计会导致问题膨胀到完全占用 CPU。
ReDoS 漏洞也会出现在你的 App 依赖的 npm 包中。
如果您对 JS 正则的隐患感兴趣，可以参阅此博客。
One More Thing
JS13K 2023 已经结束了。来自世界各地的 163 名参与者花了一个月的时间制作了一个 13kb zip 文件大小的网页游戏。自 2012 年以来，每年都有比赛。
这位大佬开发的游戏《亡者荣耀》在移动端和桌面类别中都排名第一，是一款验尸游戏。这位大佬在本文中科普了它制作整个游戏的整体流程，这个游戏也是开源的。
如果您对验尸游戏制作感兴趣，可以参阅此博客。
挨踢圣经
"调试的艺术在于澄清你真正告诉你的程序做了什么，而不是你认为你告诉它做什么。"
"The art of debugging is figuring out what you really told your program to do rather than what you thought you told it to do."
------ Andrew Singer
以上就是 2023 年第 42 周的前端周报，学废了的小伙伴可以点赞给语冰打 call，我们礼拜天佛系拖更，欢迎关注最新动态和订阅前沿资讯。谢谢大家的彼芯，掰掰~