周刊收集包括前端（但不限于前端）的文章、新聞雷厂、開源項目、工具等等叠殷，每周一更新改鲫。
?? News
Parcel 2
Parcel 2由Rust重寫，性能有了很大的提升林束，本次更新：
- ?? 全新的插件系統(tǒng)
- ?? 默認啟用tree shaking像棘，并支持ES modules、CommonJS壶冒、dynamic imports和CSS modules
- ?? 巨大的性能提升
- ?? 自動code splitting
- ?? 圖片尺寸變化缕题、格式轉(zhuǎn)化以及優(yōu)化, 支持AVIF和WebP，以及對JPEG胖腾、PNG無損壓縮
- 等等
更多內(nèi)容可以查看下面官方公告烟零。
React Router 6
可能是發(fā)布前最后一個beta版。
- 花了不少篇幅為 remix 實現(xiàn)中心配置式路由咸作，
<Router>+ useRoutes 的組合锨阿，Umi 4 已切到這個版本 - 提供
<Outlet />渲染子路由，不能用 props.children 了 - 全面支持相對路徑记罚，子路由不用寫父路由路徑
- 用 useNavigate() 進行編程式跳轉(zhuǎn)
- 不再提供
<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發(fā)布了beta版本样屠，其中一個關鍵更新是引入了新的Server引擎，可以直接部署現(xiàn)有的多個云平臺缺脉。
這個版本還支持Vue3和Vite痪欲，想了解更多的內(nèi)容可以方面下面鏈接。
https://nuxtjs.org/announcements/nuxt3-beta/
?? 文章
新生代農(nóng)民工也要懂的策略設計模式
俗話說攻礼，凡事講策略业踢。講策略的時候，我們往往會考慮每種情況的成本礁扮。策略同樣可體現(xiàn)在我們的代碼之中知举，合理利用策略模式重構邏輯復雜的代碼瞬沦，會使項目工程更易維護和擴展。
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包發(fā)布大小減半
JavaScript開發(fā)者都應該知道的33個概念
https://github.com/leonardomso/33-js-concepts
教你用CSS實現(xiàn)打字機效果
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語言插件開發(fā)入門
VSCode 為何可以支持如此之多的編程語言逛钻？如何為一門新語言編寫語言插件？又有哪些語言特性可以被應用呢锰提？本次分享為大家介紹了 VSCode 提供的編程語言相關的能力曙痘，詳細講解了代碼高亮原理、languages.* API立肘、Language Server Protocol 等內(nèi)容边坤。
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內(nèi)容
https://github.com/Adonis-Stavridis/caroumesh
Nice Modal
Nice Modal是一個輕量級超燃、零依賴的模態(tài)框管理工具耸峭。使用context來全局持久化模態(tài)框的state，這樣的方案可以讓你很簡單的控制模態(tài)框的顯示和關閉淋纲。
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（《毀滅戰(zhàn)士4》），讓你在網(wǎng)頁通過這種方式來玩游戲洽瞬。
https://healeycodes.com/doom-rendered-via-checkboxes
AnyWebP
一個在線工具本涕，可以把WebP轉(zhuǎn)為JPG/PNG/ICO。
Animated Backgrounds
CSS和JS實現(xiàn)的帶動畫背景的效果合集伙窃。
https://animatedbackgrounds.me/
Doodle Ipsum
「Doodle Ipsum」是一個以涂鴉作為測試圖片產(chǎn)生器的在線工具菩颖。
提供各種不同樣式的插圖素材，用戶可以在選擇樣式（或隨機）为障、指定大小比例和背景顏色后產(chǎn)生圖片鏈接晦闰，就能將產(chǎn)生的圖片運用在網(wǎng)頁開發(fā)原型、登陸頁面或是任何無代碼工具（No-code tool）鳍怨，例如擁有所見即所得效果的網(wǎng)頁編輯器呻右。
Sapling：展示React組件樹形結構的VS代碼擴展
隨著React項目的大小和復雜性的增加，查看頁面組件的結構是個費時費力的事情鞋喇。Sapling在VS Code側(cè)欄中添加了一個依賴關系樹声滥，用于展示組件的依賴書，并提供跳轉(zhuǎn)到文件的功能侦香。
https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling
周刊首發(fā)于GitHub落塑，歡迎訂閱：
