前端週刊第十二期

前端週刊發表每週前端技術相關的大事件、文章教程、一些框架的版本更新、以及程式碼和工具。每週定期發表，歡迎大家關注、轉載。
如果外鏈不能訪問，關注公眾號「前端每週看」，裡面有解決辦法

大事件

• Webpack 原理系列九：Tree-Shaking 實現原理——Tree-Shaking 是一種基於 ES Module 規範的 Dead Code Elimination 技術，它會在執行過程中靜態分析模組之間的匯入匯出，確定 ESM 模組中哪些匯出值未曾其它模組使用，並將其刪除，以此實現打包產物的優化。

• Parcel v2.4.0 釋出：零配置構建工具——Parcel 的新 CSS 解析器和編譯器——Parcel CSS——現在使其成為主要的 Parcel 構建工具，作為預設的 CSS 轉換器和縮小器。當然還有更多：CSS Color Level 4 支援、級聯層、改進的 JS 死程式碼消除以及對類靜態初始化塊的支援。

• RFC：Intent to Ship React 18——這個 RFC 涵蓋了 React 18 的新特性和變化。雖然 React 18非常接近，但團隊希望獲得“最後一輪廣泛的公眾反饋”（您可以在此處提交）釋出前。

• Node 之道：關於設計、架構和最佳實踐——一位開發人員總結了所有來之不易的最佳實踐和他為開發高質量 Node 應用程式而獲得的直覺。

• 本週的React Status問題：這是所有 React 連結所在的位置——如果您使用 React，請務必檢視我們的姐妹週刊： React Status。本週釋出了很多可靠的版本，包括Turnstone，一個新的 React 搜尋框元件，以及Liqvid 2.1，一個使用 React 建立互動式視訊的系統。

文章

1. findLast和findLastIndex：從頭到尾搜尋陣列的建議方法 — Axel博士很快介紹的建議，這將提供一種有效的方法來查詢陣列中從最後一項返回到第一項的內容。Array.prototype.findLastArray.prototype.findLastIndex

2. AWS CloudFront 函式簡介 — CloudFront 函式允許您將無伺服器 JS 函式部署到 AWS 的邊緣站點網路，以儘可能靠近終端使用者執行。聽起來像 Lambda@Edge？作者也解釋了那裡的區別。

3. 2022 年通過構建投資組合網站探索 SvelteKit - SvelteKit是一個用於構建 Svelte 應用程式的框架，它可以處理無聊的部分，同時讓您專注於應用程式編寫的有趣和創造性部分。

4. Zach Leatherman 將在 Eleventy SSG 上全職工作 - Zach Leatherman 最近宣佈，他現在將在 Netlify 全職從事 JS 驅動的靜態站點生成器Eleventy的工作。

5. 如何從 Vue CLI 遷移到 Vite - 如果您在2021之前開發了VUE，那麼您選擇的構建工具很可能是VUE CLI。這已經成為Vue的事實標準。js專案有一段時間了。不過現在，Evan You的下一代構建工具Vite已經引起了很多關注，是Vue CLI的絕佳替代品。

6. 使用 VUE.JS BILAL HAIDAR構建 VS Code 擴充套件 - Visual Studio（VS）是開發人員在日常任務中使用的最受歡迎的程式碼編輯器之一。它的設計考慮到了可擴充套件性。在某種程度上，VS程式碼的大多數核心功能都是作為擴充套件構建的。

框架釋出

1. Node 17.8.0 –perf_hooks新增http跟蹤。
2. Pixi.js 6.3.0 – 快速 2D 渲染庫。
3. Next SEO 5.2 – Next.js 應用程式的更簡單的 SEO。
4. React Joyride 2.4 – 在 React 應用程式中建立導遊。

程式碼和工具

1. Piling.js：用於建立“Visual Pile”介面的庫：Visual Piling是一種將元素組織和分組到集合中的方法。Piling.js 使它成為可能，快速並提供所需的 UI。
2. Ladle：更快地開發和測試您的 React 故事： 一種用於在隔離環境中構建和測試 React 元件的新工具。讓你想起故事書？Ladle 旨在成為一個替代品，但它提供了更快的效能（而且，是的，有基準）。
3. Postgres.js 3.0：用於 Node（和 Deno）的快速、全功能 Postgres 客戶端：現在對於 Deno 和 Node.js，這個高效能 Postgres 庫提供實時更改訂閱、通過特殊模板文字構建動態查詢、大型物件、通過多主機連線 URL、非同步遊標等實現高可用性。Slonik也是在這個領域考慮的另一個選擇。
4. React Flow 10：用於建立基於節點的 UI、編輯器和圖表：一個 React 元件，用於構建基於節點的互動式圖表或編輯器（不，不是 Node.js ?）。這篇博文很好地概述了最新版本。
5. 視訊到卷軸：自動編輯視訊以在 Instagram 卷軸上釋出：由 FFmpeg、ImageMagick 和 zx 提供支援。功能包括旋轉、調整大小、新增顏色過濾器、標準化音訊等。
6. Dum：一個npm用.. Rust編寫的指令碼執行程式：Rust — 繼續使用而不是JavaScript構建 JavaScript 工具的趨勢，奇怪地命名為“Dum”旨在替換npm run並npx縮短任務啟動時間的毫秒數。