摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。

前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐 為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆者的  Web 前端入門與工程實踐的前端每周清單系列系列；部分文章需要自備梯子。

前端 前端每周清單

前端每周清單專注前端領域內容，分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內國外，前端最新動態

《Facebook 發布代碼優化工具 Prepack》：Prepack 是由 Facebook 發布的 JavaScript 源代碼優化工具，它能夠在編譯時自動解析計算與重構代碼；從而減少 JavaScript 包體的代碼量，避免不必要的中間計算與對象分配過程，最終以提高代碼的運行速度。( https://prepack.io/ )

《Next.js 2.3 發布》：在 Next.js 2.3 中，應用性能得到了進一步優化。主要的優化手段包括避免內聯的 JavaScript 代碼、使用異步腳本標簽、進行腳本預加載以及引入更好的代碼分割方式、更加靈活的 Prefetch API 等等。( https://jsmantra.com/faster-l... )

《PostCSS 6.0 發布》：PostCSS 6.0 放棄了對于 Node.js 0.12 的支持，清理了所有 raws API ，添加了對于 @apply 的支持并且進一步優化了內存占用。( https://github.com/postcss/po... )

《Jest 20 發布》：Jest 20 相較于 Jest 19 帶來了更多的變化、進行了 Test Runner 的特性重寫，并且添加了新的測試接口。新版本允許同時對多項目進行測試，并且完善了配置系統，使其更加靈活；另一方面，新版本中也帶來了更多的內置測試接口，同時對文檔與代碼庫進行了優化。( https://parg.co/btU )

步步為營，掌握基礎技能

《基于 Vue.js、Webpack、Material Design 打造 PWA 應用》：PWA 應用已經受到了越來越多的關注與實踐，而本系列文章則介紹了如何使用 Vue.js、Webpack 以及 Material Design 打造 PWA 應用。本系列文章包含七個部分，分別介紹了基于 Vue.js、Webpack 與 Material Design Lite 創建單頁應用、使用 Vue-Resource 與 VueFire 進行數據交互、使用 Service Workers 實現離線模式、拍照、上傳圖片、實現推送、訪問設備地址等內容。( https://parg.co/btH )

《Create XP App》: 近日，微軟的 Skype 團隊發布了基于 React Native 的跨平臺開發框架 ReactXP，而 create-xp-app 則是快速創建 ReactXP 應用的腳手架。本文則是對于 create-xp-app 的安裝與基本使用的介紹，包括了如何運行在 Web 與 iOS/Android 等原生環境中，以及如何進行打包等內容。

《React 動畫系列教程》：本系列教程著眼于介紹 React 動畫開發相關知識，而本文則是從 CSS transitions 基礎入手，介紹了 CSS transitions 的基礎語法與進度條、導航欄等經典案例。( https://parg.co/bMF )

《掌握 Node.js 核心模塊之文件系統》：本文介紹 Node.js 核心模塊中與文件系統、文件流等相關的部分，同時還介紹了實際開發中常用的第三方文件庫。本文首先介紹了基本的讀取與寫入操作，然后介紹了權限控制、監聽等功能，最后討論了使用 graceful-fs、mock-fs、lockFile 等優秀的第三方庫來輔助開發。( https://parg.co/bMj )

《使用 React、Redux 以及 Webpack 創建 TODO 應用》：本文是面向新手的教學文章，介紹了如何利用 React、Redux 以及 Webpack 創建簡單的 TODO 應用，包括利用 Webpack 搭建構建環境、編寫基本的 React 組件以及使用 Redux 管理應用狀態等內容。( https://parg.co/bMT )

《Vue.js 與外部交互》：Vue.js 是非常優秀的網頁構建框架，不過我們往往會面臨著比較割裂的開發情況，即網頁中的一部分是交由 Vue.js 管理，而另一部分是交由其他腳本或者插件管理；這中情況在多團隊協同開發或者對舊版本的改造時可能會碰到。而本文則介紹了應該如何使用 Vue.js 與外部其他腳本進行交互，譬如管理 head 、body 標簽、監聽鍵盤事件等等內容。( https://parg.co/bMw )

立足實踐，提示實際水平

《使用 Electrino 減少近 99% 的應用大小》：Electro 是非常不錯的利用 Web 技術開發跨平臺桌面應用的運行時，不過其缺陷在于打包的應用中往往需要攜帶 Node.js 與 Chromium 的完整框架，導致了即使是最簡單的 HelloWorld 應用也有近 115MB。而 Electrino 提供了類似于 Electron 的接口，不過使用系統自帶的 Web 運行時來替代 Chromium，從而保證最后打包出來的應用僅有原來的 0.1% 大小。Electrino 適用于那些不依賴于操作系統本身功能的應用，項目也處于開發狀態。( https://parg.co/bM2 )

《餓了么的 PWA 升級實踐》：本文介紹了餓了么利用 Vue.js 與 PWA 開發其移動 Web 端過程中的實踐經驗，包括 PRPL 模式的實現、多頁面性能優化、用戶體驗優化等等內容。( https://parg.co/bMz )

《使用 Brotli 壓縮加快網頁響應速度》：提升網頁響應速度是 LinkedIn 工程師的首要關注之一，常見的提升方法就包括了如何減少瀏覽器與服務端之間傳輸的數據量。目前，主流的壓縮算法當屬 Gzip，而本文則介紹了 LinkedIn 嘗試在部分現代瀏覽器上采用 Google 工程師 2015 年提出的 Brotli 開源壓縮算法的考慮過程；Brotli 專注于文本壓縮，其相較于 Gzip 能夠帶來 20% ~ 30% 的體積減少。( https://parg.co/bMx )

《調試 Node.js 應用的最佳工具》：調試，也就是尋找與修復軟件中存在問題的過程一直是 Node.js 項目構建過程中的挑戰之一，而本文則是介紹了如何利用那些優秀的工具來輔助進行 Node.js 代碼調試。本文首先介紹日志相關內容，恰當的日志能夠幫助開發者在生產環境中迅速定位到錯誤所在；然后本文介紹了如何在開發環境中直接調試 Node.js 應用。( https://parg.co/bMB )

《Github Pages 與單頁應用》：單頁應用 SPA 以及日漸成為目前主流的網頁呈現方式，并且構建功能豐富的高性能 Web 應用也日漸容易。本文則是介紹了不同的單頁應用的部署方式，包括 Google App Engine、now、以及 Github Pages 等；本文重點介紹了 Github Pages，從概念介紹、倉庫設置、自動部署、以及常見的 Github Pages 使用過程中的實踐。( https://dev.to/_evansalter/gi... )

深度思考，升華開發智慧

《Node.js 根本沒有 float：浮點反序列化錯誤背后的故事》：在 Node.js 中，當我們把一個浮點數序列化，再反序列化，居然出錯了，這是為什么呢？作者通過刨根問底的追查，發現 Node.js 根本沒有 float！( https://parg.co/bMX )

《JavaScript 代碼風格要素》：本文是 Eric Elliott 編寫的 JavaScript 代碼風格要素指南與建議，其借鑒了 1920 年的面向英文語言的 “The Elements of Style” 一文。本文介紹的關鍵要素包括：使用函數最為組合的原子單元并且保證函數的單一職責性、移除不需要的代碼、使用更直觀具有自解釋性的變量命名、根據特性進行代碼劃分等等。( https://parg.co/bMn )

《函數式組件的函數式調用》：本文是來自 Missive 的工程師分享了他們在基于 React 進行應用開發時的技巧，即如果直接以函數調用而非組件的方式來使用函數式組件，可以避免對于 React.createElement 的調用，最終相同組件的渲染耗時可以節約近 45%。( https://parg.co/bMa )

《Chrome Canary（M60+）中的 ES6 原生模塊》：Chrome Canary 開始支持 ES6 原生模塊，本文則是介紹了如何在 Chrome Canary 中使用 ES6 原生模塊以及基本語法、如何利用 ES6 原生模塊的新特性來發布代碼、如何兼顧舊版本瀏覽器等內容。( https://parg.co/btb )

《支付寶前端構建工具的發展和未來的選擇》：本文介紹了支付寶前端構建工具的發展史，從 spm 到 ant tool，對于工具的中心化與去中心化進行了反復的考量。然后介紹了對于未來前端構建工具的選擇，包括要放棄特定業務腳手架針對通用型構建配置進一步修改或者封裝的這種方式、抹殺 webpack.config.js 這種形式、實現語義配置等。( https://github.com/pigcan/blo... )

樂于分享，共推前端發展

《k6》：k6 是基于 Go 與 JavaScript 開發的現代壓測工具，它提供了非常清晰簡單的 JavaScript 接口；同時它基于 Go 提供了分布式的部署方案，支持云端部署與 REST 接口控制。( https://github.com/loadimpact/k6 )

《sakura》：Sakura 是輕量級的 CSS 預置樣式庫，我們只需要簡單地引入 Sakura 樣式文件到網頁中就能將樸素的網頁轉化為較為美觀的、可讀性較好的頁面。( https://github.com/oxalorg/sa... )

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