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

王下邀月熊發表於2018-01-29
前端WebReact

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

新聞熱點

國內國外，前端最新動態

  • 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 相關資料參考這裡。

  • Parcel v1.5.0 釋出: 雖然釋出不久，但是 Parcel 已然在 Github 上獲取了超 17000 的點贊，並且在 npm 上有超百萬的下載量與數十位來自各地的貢獻者。Parcel v1.5.0 是釋出以來的重量級更新，其引入了 JavaScript Source Map，WebAssembly 支援，Rust 與 WebAssembly 轉換的支援，配置檔案快取失效，.env 檔案等特性，並且進一步優化了小型專案的編譯效率。

  • Expo SDK v25.0.0 釋出: 本週釋出的 Expo SDK v25.0.0 基於最近的 React Native 0.52 版本，其帶來了如下新特性：支援在獨立應用中打包字型、視訊與音訊資源；優化釋出通道，允許回滾更新，交叉釋出，檢視歷史等；為 AWS Cognito 提供了開箱即用的支援。除此之外，該版本還優化了 Calendar、MailComposer、GLView 等一系列介面與擴充套件。

  • Bootstrap 4: 儘管等待了多年，但是 Bootstrap 4 最終還是釋出了；正式版本與上一個 Beta 版本相比未有重大變化，主要著眼於部分錯誤修復與提升。本版本中優化了列印樣式與工具類，新增了額外的邊輔助函式，更新了 $spacers 與 $sizes 對映，並且修改了主題文件等。

開發教程

步步為營，掌握基礎技能

  • 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 開發基礎。

  • 一些有趣的 ECMAScript 2017 尚未接納的提案: 隨著 Polyfills 與轉換器的流行，很多還處於早期的提案在完成之前就在開發者之間獲得了極大的歡迎，本文即是對 ECMAScript 2017 尚未接納的提案中一些有趣的進行分享。作者首先討論了 ECMAScript 提案的五個程式，然後討論了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 學習參閱現代 JavaScript 開發基礎。

工程實踐

立足實踐，提示實際水平

  • 利用 Windowing 建立高效的 React 檢視: 本文是 bvaughn 討論 React 效能、搜尋與應用架構相關演講上的 Presentation，他著眼於到底是什麼拖慢了 React 應用效能，並且分享瞭如何解決問題以及學到的經驗。值得一提的是，他討論了很多關於 Windowing 工作原理，以及如何僅建立那些使用者可見資料的實踐；更多 React 教程參閱 React 與前端工程化實踐。
  • SPA 技術選型時的考量: 本文作者討論了他在對於網頁的技術選型中，是否應該採用 SPA 方案的考量，需要注意的是，本文帶有了較多的主觀態度，請批判性地看待。作者提出的考量點包括：速度與效能，高開發成本，不穩定性，不易長期維護，低安全性，重造輪子，社交媒介屬性，低可訪問性，對於記憶體的浪費等。 更多 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 程式碼。

巔峰人生

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com，註明 “ 前端之巔投稿 ”。

前端之巔微信底圖－5.jpg

相關文章