前端食堂技术周刊第 77 期：三月登陆浏览器的新功能、Nuxt DevTools、pnpm v8.0.0

美味值：🌟🌟🌟🌟🌟

口味：青提茉莉奶茶

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

本期摘要

• 三月登陆浏览器的新功能
• Nuxt DevTools
• Qwik 发布 RC 版本
• Rome v12
• pnpm v8.0.0
• 现代图片性能优化及体验优化指南
• 探究前端项目打包构建的用户故事
• 重新思考 React 最佳实践
• 现代 CSS 100 天挑战完结
• CLI 脚手架工具生态现状

大家好，我是童欧巴。欢迎来到前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1. 三月登陆浏览器的新功能

Firefox 111、Chrome 111 和 Safari 16.4 发布稳定版本。

Firefox 111

• 新增了对一些 全局 HTML 属性 的支持，包括 autocapitalize 和 translate
• 在使用文件系统访问 API 时添加了对 Origin Private File System(OPFS) 的支持

Chrome 111

• 添加了 View Transitions API
• 支持新的 CSS 颜色空间和函数，新的 DevTools 也支持相关调试
• 增加了将选择器列表传递给 :nth-child() 和 :nth-last-child() 的功能
• 增加针对 Media Session API 的演示幻灯片操作

Safari 16.4

• 135 个新功能以及超过 280 项改进

2. Nuxt DevTools

Nuxt DevTools 是一款可视化工具，可以帮助你了解 Nuxt 应用程序并进一步提高开发者体验。它的创建目的是为了更好地展示 Nuxt 和应用程序的透明度，找到性能瓶颈，并帮助管理应用程序和配置。

3. Qwik 发布 RC 版本

Qwik 到达 RC 版本里程碑。

4. Rome v12

Rome v12 发布，新增如下特性：

• 支持 JSON 文件
• 支持 TypeScript 4.7 、TypeScript 5.0
• 🧪 通过 CLI 支持导入排序
• 优化配置、诊断和自动发现等

5. pnpm v8.0.0

pnpm 发布 v8.0.0，新增如下特性：

• Node.js 14 不再支持
• 一系列关于 peer dependencies 的默认配置项更新，以便在从其他包管理器迁移时能够更加丝滑
• Lockfile 锁文件采用 Lockfile v6，去除了包 ID 的哈希值，提升锁文件的可读性，对 Git 合并冲突有更强的抵抗力
• 当 package.json 中有 files 字段时，只有其中列出的文件才有幸被 deploy
• 直接依赖项去重，减肥成功

下面我们来看技术资料。

技术资料

1. 现代图片性能优化及体验优化指南

在各种新特性满头飞的今天，我们如何尽可能的对我们的图片资源，进行性能优化及体验优化呢，本文总结了大量的实践方法。

2. 探究前端项目打包构建的用户故事

为什么曾经需要打包？为什么打包后还需要分包？为什么我们现在可以使用 bundleless？本文会对这些疑问进行一一解答。

3. 重新思考 React 最佳实践

十多年前，React 重新思考了客户端渲染 SPA 领域的最佳实践。如今，React 的采用率达到了顶峰，同时也持续受到大量的批评和质疑，本文将深入探讨 React 从客户端视图库到应用程序架构的演变之路。

4. 现代 CSS 100 天挑战完结

是时候让我们迎头赶上现代 CSS 了，在 CSS 中有很多新东西，我们对它们了解得太少。为了改变这种情况，可以和作者一起回顾这 100 天的挑战。

5. CLI 脚手架工具生态现状

开发 CLI 脚手架工具时，我们有很多库可以选择，但许多已经过时。有些库的开发陷入停滞，有些被维护者放弃，还有许多没有赶上现代开发实践。本文旨在对最流行的包进行分类，并重点介绍其中的一些包及其当前的开发状态。包括参数解析、输出样式、用户输入、框架等方面。

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

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