题图：卷饼兔。

Hi，我是云谦，欢迎打开新一期的「MDH：前端周刊」，这是第 0083 期，发表于 2023/01/16，将为您带来最新的资讯和分享。

注意：本文带有大量链接，推荐点击「查看原文」在语雀上查看。

一周新闻

本期一周新闻由 YingCi 主笔，推荐关注他的 Telegram 频道《咲奈的平行时空》，更新频率很高，通过此可了解大部分前端相关资讯。也欢迎订阅我的 Telegrame 频道《云谦的自说自话》作为补充。

• 成功的秘诀：Bun 作者每个周要工作 95 小时，相当于每天编码 13 小时。

• Bun 下个版本将支持 node:readline ，因为 Vite 依赖这个包，所以现在 Bun runtime 还没法把 Vite 跑起来。

• Tanstack 旗下 React Query 作者认为 Tanstack 正确的读音是：10 step (英文: ten step）。

• codepen 公布了 2022 年最受欢迎的 100 个项目。

• 一份 GitHub 调查报告显示，国人最喜欢给仓库点 star ，有 20% 的 star 都是国人开发者点的。

• React Query 支持与 svelte 一起使用。

• Github 支持给 discussion 配置通用模板。

• Github 支持了给组织级别配置通用的 Actions 模板，而无需单独配置每个仓库。

• Github 支持了在 Actions 中配置环境变量，但还只支持静态变量。

• pnpm v7.24.2 发布，支持了新的 v6 版本 lockfile 格式。

• zustand v4.3.0 发布，去除了所有的默认导出，因为这与某些打包器不兼容。

• jotai v1.13.0 发布，新增了全新的 jotai devtools 。

• State of js 2022 调查报告结果：React 继续做老大，Vite 最受欢迎。

• Chrome v109 发布，performance 录制中函数映射优化等，没有 awesome 的变化。

• Turborepo v1.7.0 发布，现在必须显示声明哪些产物被缓存。

• codesandbox 支持了在 docker 中运行项目，对服务端项目更友好了。

• Swc 代码压缩 minify 功能取得新进展：产物体积等指标已优于 Terser ，参考 nextjs 的 issue 反馈，产物质量仍存在不少问题。

• 以 Vue.js team member 三咲智子为首要贡献者的 Mastodon 网页版客户端 elk 开源。

• Chromium 将在 C++ 代码中使用 Rust 。

• React native 0.71 发布，默认创建新项目是 TS 模板等变化。

深度好文

好文推荐。这周好文真多，以下是我全文阅读过的部分。

• 《Type-safe React Query》，Dominik 的每篇文章都值得深入阅读。React Query 的类型可以定义在哪？1）useQuery<Todos>，2）const queryFn: Promise<Todos>，3）axios.get<Todos>，4）res.data as Todos，5）不定义。不定义怎么有类型？用 zod，然后定义 schema，schema 不仅可用于校验后端数据，还会返回类型。

• 《Data binding in React: how to work with forms in React》，johnwcomeau 的每篇文章也值得阅读，这篇比较新手向，深入解答了面试必问问题「受控和不受控」。

• 《Clever Code Considered Harmful》，johnwcomeau 这周的另一篇文章。判断代码好不好的一个标准是，一个初级开发人员，一个职业生涯刚刚起步的人，会不会在理解这段代码时遇到困难？

• 《React JS Best Practices From The New Docs》，Sebastian Carlos 阅读完 React 新官网文档后总结的 160 条笔记。我帮我节省了大量时间，我读完他的笔记后记了 20 多条笔记。但如果有空，还是应该完整阅读 React 的新文档。

• 《JavaScript Wrapped 2022》，作者整理了 TypeScript、React、Angular、Vue、SSR、Node|Deno|Bun 的 2022 发展和 2023 展望，建议熟读。

• 《3D in CSS》，交互式的 3D CSS 教程。主要是 4 个 CSS 属性，包括 perspective、perspectiveOrigin、translateZ 和 rotate3d。

• 《Building a fast, animated image gallery with Next.js》，Vercel 把 Next.js Conf 2022 的照片搬上网，同时把这套代码开源。技术栈包括 Cloudinary、Next.js 图像组件、imagemin、Framer Motion、以及用 ai 生成 alt 文本等。

• 《Our top Core Web Vitals recommendations for 2023》，本文 Google DevRel 团队认为在 2023 年提高 Core Web Vitals 性能的最有效方法的最佳实践集合。涉及的性能指标包括 LCP、TTFB、CLS、FID 和 INP，同时给出了每个指标提升的注意点和可执行操作。

• 《The hardest part of web dev》，关于 timing 的知识。其中 react 中，1）渲染函数在React更新DOM之前运行，2）useInsertionEffect回调在React更新DOM后运行，但在浏览器重新计算页面布局之前，3）useLayoutEffect回调在浏览器重新计算页面布局后运行（考虑到useInsertionEffect回调注入的任何CSS），但在浏览器重新绘制之前，4）useEffect回调在浏览器完成重绘后运行。

• 《Fixing a Memory Leak in a Production Node.js App》，kentcdodds 在 production 中修复内存泄漏过程的记录。包括，1）通过 v8.writeHeapSnapshot 可创建 heap snapshots，然后用 Chrome 进行分析，2）使用 lru-cache 确保 cache 不会太大。最后发现问题的根源是用 express-http-proxy 做图片代理导致的。

Umi 和我

关于 Umi 和我最近的进展。

• Umi 例行每周四发一版，我觉得有趣的功能包括，1）新增 react-query 插件，2）优化 icons 方案，支持 hover、spin、rotate、flip、local icons、alias 等功能，3）升级 babel 和 webpack 相关依赖到最新。

• VSCode 下有个叫「Error Lens」插件非常好用，相见恨晚，可以在行内显示潜在出错信息，Intellij 系与之对应的插件叫「InlineError」。

• 花几小时理清了 Next.js 使用 Turbopack 的流程。

• 这篇周刊的整理耗时 4 小时，这周好文太多，大部分时间用于阅读。

星球更新

不知不觉我的知识星球已维护近一年，更了 240 多篇文章，包含了我们最新的观点和见解。以下是近一周的星球更新，访问「q.sorrycc.com」了解更多。

• 246 - 《装了啥 2023》，每年更新一版我在用的工具

• 245 - 《按需加载 PC 和 Mobile 资源》，一个实际业务问题的解法

• 244 - 《困难模式》，选择困难模式，人生会越来越简单

• 243 - 《Next.js x Turbopack》，理清 Next.js 如何使用 Turbopack

• 242 - 《“完美”体验的 TODO App》，写 Remote 数据的 TODO App 应该注意啥

每周一图

来源：https://vived.io/javascript-wrapped-2022-frontend-weekly-vol-119/

小结

如果你喜欢 MDH 前端周刊，请转发给你的朋友，告诉他们 到这里来订阅 ，这是对我最大的帮助。下期见！

MDH，让开发者有笑容 :)