前端每週清單第 49 期：Webpack 4 Beta 嚐鮮，React Windowing 與 setState 分析，Web Worker 實戰

時間 2019-11-06

標籤前端每週清單 webpack beta 嚐鮮 react windowing setstate 分析 web worker 實戰欄目 React 简体版

原文原文鏈接

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID: frontshow），及時獲取前端每週清單。css

新聞熱點

國內國外，前端最新動態前端

iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers: 本週，Safari Technology Preview 48 版本發佈，其引入了包括密碼自動填充機制變動、啓用 Storage Access API 等一系列特性。更值得一提的是，這也意味着 iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers，從而容許開發者利用後臺腳本提供更強大的可離線使用的 Web 應用；此外，iOS 11.3 還容許將 Web Apps 添加到屏幕桌面，而且支持 Manifest 文件，更多 PWA 相關資料參考這裏。webpack
Parcel v1.5.0 發佈: 雖然發佈不久，可是 Parcel 已然在 Github 上獲取了超 17000 的點贊，而且在 npm 上有超百萬的下載量與數十位來自各地的貢獻者。Parcel v1.5.0 是發佈以來的重量級更新，其引入了 JavaScript Source Map，WebAssembly 支持，Rust 與 WebAssembly 轉換的支持，配置文件緩存失效，.env 文件等特性，而且進一步優化了小型項目的編譯效率。git
Expo SDK v25.0.0 發佈: 本週發佈的 Expo SDK v25.0.0 基於最近的 React Native 0.52 版本，其帶來了以下新特性：支持在獨立應用中打包字體、視頻與音頻資源；優化發佈通道，容許回滾更新，交叉發佈，查看歷史等；爲 AWS Cognito 提供了開箱即用的支持。除此以外，該版本還優化了 Calendar、MailComposer、GLView 等一系列接口與擴展。github

Bootstrap 4: 儘管等待了多年，可是 Bootstrap 4 最終仍是發佈了；正式版本與上一個 Beta 版本相比未有重大變化，主要着眼於部分錯誤修復與提高。本版本中優化了打印樣式與工具類，添加了額外的邊輔助函數，更新了 $spacers 與 $sizes 映射，而且修改了主題文檔等。

開發教程

步步爲營，掌握基礎技能web

webpack 4 beta 嚐鮮: 本週，webpack 4.0.0-beta.0 發佈，本文便是對於 Webpack 4 的特性與使用進行簡要介紹。Webpack 4 爲咱們帶來了以下特性：多場景下更好的性能提高，更好的默認配置，支持 package.json 中的 sideEffects 配置，更好的 JSON Tree Shaking 支持，更新到 UglifyJS2，更多的類型支持，WebAssembly 支持，取消 CommonsChunkPlugin 替換爲默認優化配置。更多 Webpack 相關資料參考這裏。

有趣的 JavaScript Proxies 用法: JavaScript 中還有不少還沒有普遍使用的新特性，JavaScript proxies 可能就是其中之一，它可以在運行時複寫或者攔截某個對象的屬性以及方法。本文中，做者使用 Proxy 完成了幾個有趣的小功能：僅有二十行代碼的 API SDK，以可讀性更好的方式查詢數據屬性值，監控異步函數調用等。更多 JavaScript 學習參閱現代 JavaScript 開發基礎。npm
一些有趣的 ECMAScript 2017 還沒有接納的提案: 隨着 Polyfills 與轉換器的流行，不少還處於早期的提案在完成以前就在開發者之間得到了極大的歡迎，本文便是對 ECMAScript 2017 還沒有接納的提案中一些有趣的進行分享。做者首先討論了 ECMAScript 提案的五個進程，而後討論了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 學習參閱現代 JavaScript 開發基礎。json

工程實踐

立足實踐，提示實際水平bootstrap

利用 Windowing 建立高效的 React 視圖: 本文是 bvaughn 討論 React 性能、搜索與應用架構相關演講上的 Presentation，他着眼於究竟是什麼拖慢了 React 應用性能，而且分享瞭如何解決問題以及學到的經驗。值得一提的是，他討論了不少關於 Windowing 工做原理，以及如何僅建立那些用戶可見數據的實踐；更多 React 教程參閱 React 與前端工程化實踐。

SPA 技術選型時的考量: 本文做者討論了他在對於網頁的技術選型中，是否應該採用 SPA 方案的考量，須要注意的是，本文帶有了較多的主觀態度，請批判性地看待。做者提出的考量點包括：速度與性能，高開發成本，不穩定性，不易長期維護，低安全性，重造輪子，社交媒介屬性，低可訪問性，對於內存的浪費等。更多 Web 架構相關資料參考這裏。

基於 IntersectionObserver 進行資源延遲加載: 本文中，咱們將會討論頁面滾動交互裏常常涉及到的資源懶加載，不只僅是圖片，而是基於 IntersectionObserver 的任何資源懶加載。本文也會討論如何根據元素的可見性來判斷是否觸發某個函數，更多 Web 性能優化相關內容參考 Web 開發基礎與工程實踐。

深度閱讀

深度思考，昇華開發智慧前端工程化

why is setState asynchronous?: MobX 的做者，mweststrate，近日提了某個 Issue 討論爲什麼 setState 須要設置爲異步。咱們耳熟能詳的緣由是異步的 setState 用於進行異步渲染，而且確保 state 對象是反饋了那些被渲染好的狀態。而 Gaearon 也澄清了這個問題，異步的 setState 主要是爲了保證內部一致性，而且爲後續的併發更新打下基礎。更多 React 教程參閱 React 與前端工程化實踐。
JavaScript 工做原理系列：Web Workers 淺析與典型的使用場景: 本文是 How JavaScript Works 系列文章的第七篇，主要討論了 Workers 的類型，它們的特性與做用，以及它們在不一樣的場景下的優點與不足。衆所周知的是，異步代碼以及 Event Loop 機制可以幫助緩解 JavaScript 單線程的不足；而 Web Worker 則是可以建立輕量級的、瀏覽器內線程，從而運行那些並不會阻塞 Event Loop 的代碼。Web Worker 典型的使用場景包括了 Ray tracing，數據加解密，數據預抓取，Progressive Web Apps 以及拼寫檢查等等；更多 Web Worker 相關資料參考這裏。

Firefox 58: The Quantum Era Continues: 對於 Mozilla 而言，2017 年是個很是有意義里程碑，正式發佈了 Firefox Quantum，經過完全重寫的方式極大地提高與優化了 Firefox 的性能與使用體驗。本文便是對於 Firefox 58 版本正式發佈時，其帶來的新特性進行解讀：非主線程渲染、後臺 Tab 限流、WebAssembly 流式編譯器、CSS 字體呈現、新的 Promise 特性等，更多 Firefox 59 的規劃能夠查看這裏。

開源項目

樂於分享，共推前端發展

Rejoiner: Rejoiner 是由 Google 開源的，可以基於 gRPC 或者其餘的 Protobuf 資源自動生成統一 GraphQL Schema 的工具。它致力於靈活化 GraphQL 的定義與交互，方便多數據源鏈接。

CSS Gridish: CSS Gridish 可以基於產品的網格設計，自動生成多個資源文件：包含畫板與網格佈局設計的 Sketch 文件，包含了 Flexbox 兼容的 CSS/SCSS CSS Grid 代碼，可以用於監測網頁佈局的 Chrome 插件。須要注意的是，該工具並不致力於輔助構建網格，而是幫你自動化地生成產品開發全流程中須要的資源文件，更多信息查閱這裏。

Greenlet: Greenlet 可以將異步函數移入獨立線程中，能夠看作 workerize 函數的單函數簡化版。不過須要注意的是，Greenlet 僅支持純函數，其會在獨立的做用域中運行這些函數。

Purgecss: 當咱們開發網頁時，每每會使用 Bootstrap，Materializecss 以及 Foundation 這樣的 CSS 庫；不過實際上咱們僅會使用其中的部分樣式，其他的樣式對於當前界面而言均可以算做冗餘樣式。Purgecss 便可以幫助咱們清除界面上的無用樣式，它可以自動分析輸入的 HTML 文件與 CSS 樣式，而且進行選擇器匹配，最終移除無用的 CSS 代碼。