共计 3233 个字符，预计需要花费 9 分钟才能阅读完成。
周刊收集包含前端（但不限于前端）的文章、新闻、开源我的项目、工具等等，每周一更新。
📰 News
Parcel 2
Parcel 2 由 Rust 重写，性能有了很大的晋升，本次更新：
- 🔌 全新的插件零碎
- 🌳 默认启用 tree shaking，并反对 ES modules、CommonJS、dynamic imports 和 CSS modules
- 🚀 微小的性能晋升
- ✂️ 主动 code splitting
- 🖼 图片尺寸变动、格局转化以及优化, 反对 AVIF 和 WebP，以及对 JPEG、PNG 无损压缩
- 等等
更多内容能够查看上面官网布告。
https://parceljs.org/blog/v2/
React Router 6
可能是公布前最初一个 beta 版。
- 花了不少篇幅为 remix 实现核心配置式路由，
<Router>+ useRoutes 的组合，Umi 4 已切到这个版本 - 提供
<Outlet />渲染子路由，不能用 props.children 了 - 全面反对相对路径，子路由不必写父路由门路
- 用 useNavigate() 进行编程式跳转
- 不再提供
<Switch />，用<Routes />代替 <Route index />示意 Index 路由<Route />不能被封装，比方封装一个<PrivateRoute />用于权限，取而代之的是<Route element />的形式<Routes />能够嵌套，嵌套在<Route />下的<Routes />会基于前者的 path，留神前者的 path 加 * 后缀，否则后者不匹配时会不显示- 不再提供
<Redirect />，举荐服务端判断了间接跳，小老本降级也可用<Navigate replace to="/home" />，毛病是不反对服务端渲染
https://github.com/remix-run/react-router/releases/tag/v6.0.0-beta.7
Nuxt 3 Beta
Nuxt 3 公布了 beta 版本，其中一个要害更新是引入了新的 Server 引擎，能够间接部署现有的多个云平台。
这个版本还反对 Vue3 和 Vite，想理解更多的内容能够方面上面链接。
https://nuxtjs.org/announcements/nuxt3-beta/
📖 文章
新生代农民工也要懂的策略设计模式
俗话说，凡事讲策略。讲策略的时候，咱们往往会思考每种状况的老本。策略同样可体现在咱们的代码之中，正当利用策略模式重构逻辑简单的代码，会使我的项目工程更易保护和扩大。
https://mp.weixin.qq.com/s/nVlZ9V744DQUNiWBP0m8_Q
如何排查 React 中渲染慢的组件?
https://alexsidorenko.com/blog/react-performance-slow-renders/
React 源码中的位运算技巧
https://mp.weixin.qq.com/s/zrfmXGHK4PG8B6pdGYO6Aw
AWS 是如何将 AWS SDK 的 JavaScript 包公布大小减半
https://aws.amazon.com/cn/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/
JavaScript 开发者都应该晓得的 33 个概念
https://github.com/leonardomso/33-js-concepts
教你用 CSS 实现打字机成果
https://www.sitepoint.com/css-typewriter-effect/
在微前端中加载 Vite 利用
https://mp.weixin.qq.com/s/Pd9jQI6DOKJ16hVbLNKtOA
My Logging Best Practices
log 的最佳实际。
https://tuhrig.de/my-logging-best-practices/
VSCode 语言插件开发入门
VSCode 为何能够反对如此之多的编程语言？如何为一门新语言编写语言插件？又有哪些语言个性能够被利用呢？本次分享为大家介绍了 VSCode 提供的编程语言相干的能力，具体解说了代码高亮原理、languages.* API、Language Server Protocol 等内容。
https://mp.weixin.qq.com/s/Eqb9hAvG-WeseP9rCl_XRg
从 fabric 源码来看如何做好一个 canvas 库
前言，本篇文章能够让你从 0 到 1 疾速理解 canvas，理解 fabricjs 源码库的整体组织和要害外围代码。
https://mp.weixin.qq.com/s/OtKqeE0FnLLxHZUk02dj-w
🛠 工具、软件
react-spring
react-spring 是基于 spring-physics（弹簧物理）的 react 动画库，动画成果更加晦涩、天然。
https://github.com/pmndrs/react-spring
Caroumesh: 轮播组件中展现 3D 内容
https://github.com/Adonis-Stavridis/caroumesh
Nice Modal
Nice Modal 是一个轻量级、零依赖的模态框管理工具。应用 context 来全局长久化模态框的 state，这样的计划能够让你很简略的管制模态框的显示和敞开。
import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';
//...
NiceModal.show(MyModal, { someProp: 'hello'}).then(() => {// do something if the task in the modal finished.});
//...demo：https://ebay.github.io/nice-modal-react/
https://github.com/eBay/nice-modal-react
DOOM Rendered via Checkboxes
这是一个很有意思的我的项目，应用 Checkboxes 来渲染 DOOM（《覆灭兵士 4》），让你在网页通过这种形式来玩游戏。
https://healeycodes.com/doom-rendered-via-checkboxes
AnyWebP
一个在线工具，能够把 WebP 转为 JPG/PNG/ICO。
https://anywebp.com/
Animated Backgrounds
CSS 和 JS 实现的带动画背景的成果合集。
https://animatedbackgrounds.me/
Doodle Ipsum
「Doodle Ipsum」是一个以涂鸦作为测试图片产生器的在线工具。
提供各种不同款式的插图素材，用户能够在抉择款式（或随机）、指定大小比例和背景色彩后产生图片链接，就能将产生的图片使用在网页开发原型、登陆页面或是任何无代码工具（No-code tool），例如领有所见即所得成果的网页编辑器。
https://doodleipsum.com/
Sapling：展现 React 组件树形构造的 VS 代码扩大
随着 React 我的项目的大小和复杂性的减少，查看页面组件的构造是个费时费力的事件。Sapling 在 VS Code 侧栏中增加了一个依赖关系树，用于展现组件的依赖书，并提供跳转到文件的性能。
介绍文章：https://www.scien.cx/2021/10/09/introducing-sapling-a-vs-code-extension-for-traversing-your-react-component-hierarchy/
https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling
周刊首发于 GitHub，欢送订阅：
我的周刊
