湖中剑前端周刊 #11 | VSCode插件开发、策略模式、React Router 6、位运算技巧、Nuxt 3、打字机效果

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

📰 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引擎，可以直接部署现有的多个云平台。

image

这个版本还支持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包发布大小减半

image

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实现打字机效果

image

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动画库，动画效果更加流畅、自然。

image

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