摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁(yè)響應(yīng)速度餓了么升級(jí)實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。

前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁(yè)響應(yīng)速度、餓了么PWA 升級(jí)實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆者的  Web 前端入門與工程實(shí)踐的前端每周清單系列系列；部分文章需要自備梯子。

前端 前端每周清單

前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單。

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

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

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

《Jest 20 發(fā)布》：Jest 20 相較于 Jest 19 帶來(lái)了更多的變化、進(jìn)行了 Test Runner 的特性重寫，并且添加了新的測(cè)試接口。新版本允許同時(shí)對(duì)多項(xiàng)目進(jìn)行測(cè)試，并且完善了配置系統(tǒng)，使其更加靈活；另一方面，新版本中也帶來(lái)了更多的內(nèi)置測(cè)試接口，同時(shí)對(duì)文檔與代碼庫(kù)進(jìn)行了優(yōu)化。( https://parg.co/btU )

步步為營(yíng)，掌握基礎(chǔ)技能

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

《Create XP App》: 近日，微軟的 Skype 團(tuán)隊(duì)發(fā)布了基于 React Native 的跨平臺(tái)開發(fā)框架 ReactXP，而 create-xp-app 則是快速創(chuàng)建 ReactXP 應(yīng)用的腳手架。本文則是對(duì)于 create-xp-app 的安裝與基本使用的介紹，包括了如何運(yùn)行在 Web 與 iOS/Android 等原生環(huán)境中，以及如何進(jìn)行打包等內(nèi)容。

《React 動(dòng)畫系列教程》：本系列教程著眼于介紹 React 動(dòng)畫開發(fā)相關(guān)知識(shí)，而本文則是從 CSS transitions 基礎(chǔ)入手，介紹了 CSS transitions 的基礎(chǔ)語(yǔ)法與進(jìn)度條、導(dǎo)航欄等經(jīng)典案例。( https://parg.co/bMF )

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

《使用 React、Redux 以及 Webpack 創(chuàng)建 TODO 應(yīng)用》：本文是面向新手的教學(xué)文章，介紹了如何利用 React、Redux 以及 Webpack 創(chuàng)建簡(jiǎn)單的 TODO 應(yīng)用，包括利用 Webpack 搭建構(gòu)建環(huán)境、編寫基本的 React 組件以及使用 Redux 管理應(yīng)用狀態(tài)等內(nèi)容。( https://parg.co/bMT )

《Vue.js 與外部交互》：Vue.js 是非常優(yōu)秀的網(wǎng)頁(yè)構(gòu)建框架，不過(guò)我們往往會(huì)面臨著比較割裂的開發(fā)情況，即網(wǎng)頁(yè)中的一部分是交由 Vue.js 管理，而另一部分是交由其他腳本或者插件管理；這中情況在多團(tuán)隊(duì)協(xié)同開發(fā)或者對(duì)舊版本的改造時(shí)可能會(huì)碰到。而本文則介紹了應(yīng)該如何使用 Vue.js 與外部其他腳本進(jìn)行交互，譬如管理 head 、body 標(biāo)簽、監(jiān)聽(tīng)鍵盤事件等等內(nèi)容。( https://parg.co/bMw )

立足實(shí)踐，提示實(shí)際水平

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

《餓了么的 PWA 升級(jí)實(shí)踐》：本文介紹了餓了么利用 Vue.js 與 PWA 開發(fā)其移動(dòng) Web 端過(guò)程中的實(shí)踐經(jīng)驗(yàn)，包括 PRPL 模式的實(shí)現(xiàn)、多頁(yè)面性能優(yōu)化、用戶體驗(yàn)優(yōu)化等等內(nèi)容。( https://parg.co/bMz )

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

《調(diào)試 Node.js 應(yīng)用的最佳工具》：調(diào)試，也就是尋找與修復(fù)軟件中存在問(wèn)題的過(guò)程一直是 Node.js 項(xiàng)目構(gòu)建過(guò)程中的挑戰(zhàn)之一，而本文則是介紹了如何利用那些優(yōu)秀的工具來(lái)輔助進(jìn)行 Node.js 代碼調(diào)試。本文首先介紹日志相關(guān)內(nèi)容，恰當(dāng)?shù)娜罩灸軌驇椭_發(fā)者在生產(chǎn)環(huán)境中迅速定位到錯(cuò)誤所在；然后本文介紹了如何在開發(fā)環(huán)境中直接調(diào)試 Node.js 應(yīng)用。( https://parg.co/bMB )

《Github Pages 與單頁(yè)應(yīng)用》：?jiǎn)雾?yè)應(yīng)用 SPA 以及日漸成為目前主流的網(wǎng)頁(yè)呈現(xiàn)方式，并且構(gòu)建功能豐富的高性能 Web 應(yīng)用也日漸容易。本文則是介紹了不同的單頁(yè)應(yīng)用的部署方式，包括 Google App Engine、now、以及 Github Pages 等；本文重點(diǎn)介紹了 Github Pages，從概念介紹、倉(cāng)庫(kù)設(shè)置、自動(dòng)部署、以及常見(jiàn)的 Github Pages 使用過(guò)程中的實(shí)踐。( https://dev.to/_evansalter/gi... )

深度思考，升華開發(fā)智慧

《Node.js 根本沒(méi)有 float：浮點(diǎn)反序列化錯(cuò)誤背后的故事》：在 Node.js 中，當(dāng)我們把一個(gè)浮點(diǎn)數(shù)序列化，再反序列化，居然出錯(cuò)了，這是為什么呢？作者通過(guò)刨根問(wèn)底的追查，發(fā)現(xiàn) Node.js 根本沒(méi)有 float！( https://parg.co/bMX )

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

《函數(shù)式組件的函數(shù)式調(diào)用》：本文是來(lái)自 Missive 的工程師分享了他們?cè)诨?React 進(jìn)行應(yīng)用開發(fā)時(shí)的技巧，即如果直接以函數(shù)調(diào)用而非組件的方式來(lái)使用函數(shù)式組件，可以避免對(duì)于 React.createElement 的調(diào)用，最終相同組件的渲染耗時(shí)可以節(jié)約近 45%。( https://parg.co/bMa )

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

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

樂(lè)于分享，共推前端發(fā)展

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

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

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”。