前端每週清單第 48 期：Slack Webpack 構建優化，CSS 命名規範與用戶追蹤，Vue.js 單元測試

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

新聞熱點

國內國外，前端最新動態

• ECharts 4.0 發佈: 2018 年 1 月 16 日，百度的 ECharts 團隊對產品進行了更新，發佈了時隔兩年的大版本 4.0。在 ECharts 4.0 新版本中，主要在性能功能、易用性及擴大使用範圍三個大的方面進行了八項升級：帶給用戶更強大的性能和功能，讓開發者使用 ECharts 變得更加輕鬆，讓更多的人在更多的場景都能訪問使用 ECharts 製做的可視化產品。

• Puppeteer 1.0 發佈: Puppeteer 是由 Google Chrome 團隊開源的，Headless Chrome 操做接口庫，已成爲事實上的 Headless 瀏覽器操做標準。本週 Puppeteer 1.0 正式發佈，爲咱們帶來了 Chromium 65，page.coverage API，page.pdf() 支持自定義頭部與腳部，XPath 支持加強，target.createCDPSession() 兼容原生協議等特性變化。

• jQuery 3.3.0 發佈: jQuery 仍然是不少 Web 開發工做中不可或缺的部分，自上次 jQuery 大版本更新以來，其核心團隊更多地着眼於應該移除什麼部分，而不是添加新的功能特性，來保證 jQuery 的小巧易用性。該版本中移除了部分過期的 API，而且爲 .addClass(), .removeClass(), 以及 .toggleClass() 這幾個函數支持輸入某個樣式類名數組做爲參數。

• Angular 5.2 發佈: Angular 5.2 發佈，其能夠直接替代以前的 5.1 版本，包含了部分錯誤修復與性能提高。新版本中，優化了對於模板的類型檢查，添加了對於 TypeScript 2.6 的支持，優化了 Router 參數與數據繼承。

開發教程

步步爲營，掌握基礎技能

• 無縫爲 create-react-app 項目添加 SSR + 代碼分割特性: create-react-app 是很是不錯的原型化工具，可以快速搭建 React 基礎應用。本文便是介紹在無需彈出配置的狀況下，爲 create-react-app 建立的項目添加服務端渲染與代碼分割異步加載的特性；本文依次介紹了服務端渲染、基於 react-loadable 的代碼分割、服務端代碼分割、利用 Webpack 的 chunkNames 特性等內容。更多 React 學習參考 React 與前端工程化實踐。

• Vue Devtools 4.0 新特性介紹: 日前 Vue Devtools 發佈了 4.0 大版本更新，引入了一系列的新特性與提高，本文便是對這些變化進行深刻解讀。本文介紹的新特性包括了組件數據可編輯、在外部編輯器中打開組件、展現原始組件名、優化組件審查方式、根據組件過濾事件、可伸縮的審查器等；更多 Vue.js 學習資料參考 Vue Reference。

• CSS 命名規範，加速你的代碼調試: 維護大型的 CSS 代碼庫並不是易事，特別是那些隨意散漫未經組織的 CSS 代碼極易變成一團亂麻；本文則深刻淺出地介紹了 CSS 命名規範，來幫助開發者編寫優質的代碼。本文首先討論了連字符與 camelCase，而後介紹了 BEM 的含義與用法，最後討論瞭如何設置合適的 JS 操做類；更多 CSS 學習資料參考 Web 開發基礎與工程實踐。

• 純 CSS 的網頁追蹤方案: 咱們常常會從用戶訪問的網頁中，採集某些用戶相關的偏好數據，譬如他們對於某些連接的點擊狀況等等。本文則是提出了一種不使用 JS，純粹依賴於 CSS 來進行網頁追蹤與分析的方案，其依賴於用戶點擊某個連接或者懸停在某個元素以後，瀏覽器添加的默認樣式類；該方案目前可以用於採集用戶的訪問與查看狀況，更多 CSS 學習資料參考 Web 開發基礎與工程實踐。

工程實踐

立足實踐，提示實際水平

• 菜鳥網絡前端全棧化之路: WEB 前端開發在開發體系裏面是一個特殊的羣體，阿里早期給前端的定義是「D2」，D2 的含義是：developer & designer。這麼一個定位就直接致使了基礎教育階段的人才是空白的，也致使了前端優秀人才特別少，招聘難的問題，隨之帶來的問題每每會成爲整個研發鏈路的瓶頸。另外近幾年隨着無線的快速發展，前端在 PC 傳統流域的優點逐漸在喪失，而無線端隨着無線動態化技術的發展，web 前端又再次受到發展空間的擠壓。在這樣的狀況下前端這個崗位其實須要一些比較大的突破和改變。而 web 前端傳統價值的中臺化和新領域的拓展變的尤其重要。今天我要分享的就是菜鳥是如何實施前端技術中臺化和推進開發全棧的一些經驗。

• 來自 Slack 的 Webpack 構建性能優化: Webpack 已然是主流的前端打包工具之一，不過其繁榮的第三方插件生態反而會使得，優化 Webpack 的構建性能成爲了一件不容易的事情。本文便是來自 Slack 的工程師，分享的他們在重構整個前端過程當中累積的，如何優化 Webpack 構建性能的經驗；本文主要從衡量而且分析構建耗時的組成、並行化構建流程、減小構建工做、使用緩存、優化硬件等幾個方面。更多 Webpack 學習資料參考 Webpack Reference。

• 編寫 Vue.js 單元測試時須要規避的五個陷阱: 單元測試是應用開發中不可或缺的部分，本文做者會按部就班地，以具體的例子來介紹平常開發中會用到的 Vue.js 單元測試的例子。做者但願在本文中講清楚如何測試、應該測試哪些，並提醒開發者注意避免五個坑：等到最後再測試，測試了不恰當的內容，搞混了 Test Doubles，結構過分耦合，過分追求測試覆蓋率等；更多 Vue.js 學習資料參考 Vue Reference。

深度閱讀

深度思考，昇華開發智慧

• 理解 React 源代碼: React 爲咱們提供了直接易用的，以狀態爲核心的前端應用開發方式，本系列文章則着眼於分析 React 內部工做原理。依次討論了 React 中簡單組件、類組件等渲染流程；更多 React 學習參考 React 與前端工程化實踐。

• Node.js 內建模塊加載機制: 本系列文章着眼於分析 Node.js 內部原理，首篇文章討論了 Node.js 的主進程是如何啓動的。接下來做者又分析了在主進程初始化過程當中，是如何加載內建模塊的，而後還深度分析了 os 包的實現；更多 Node.js 學習參考深刻淺出 Node.js 全棧架構。

• 未曾瞭解的 JS 特性: 本文做者在通讀了 MDN 文檔以後，驚訝地發現了不少他未曾瞭解的 JS 特性與 API；本文便是做者的讀後總結分享，JS 也是學無止境啊。做者在本文中介紹了 Label Statements，void 操做符，Comma 操做符，with 條件操做符，國際化 API，管道操做符，setTimeout 參數等等；更多 JavaScript 學習參閱現代 JavaScript 開發基礎。

開源項目

樂於分享，共推前端發展

• After.js: After.js 是相似於 Next.js 的 React 服務端渲染框架，不過其是由了 React Router 做爲路由系統，而不像 Next.js 那樣自建路由系統。After.js 一樣踐行了組件即路由的理念，支持基於路由的代碼分割、基於路由的變換、分析、數據加載、數據預加載等。

• dialog-polyfill: 上週的清單中咱們介紹過 HTML 5.2 中引入的 dialog 標籤，dialog-polyfill 則是由 Google 開源的，dialog 的適配庫。不一樣於第三方組件或者框架提供的彈窗功能，原生的 dialog 標籤更爲簡單易用，而且其可訪問性也更好，瀏覽器也可以針對該標籤進行優化。

• JARVIS: J.A.R.V.I.S. (Just A Rather Very Intelligent System) 是 Webpack 實時監控工具，其可以將開發環境或生產環境下的 Webpack 構建信息實時展現到瀏覽器中。JARVIS 借鑑了 Webpack Dashboard 等流行的 Webpack 監控工具，而後提供了可優化的 ES Harmony 模塊統計、將資源分割爲不一樣的類別等擴展功能。

• 1Backend: 1Backend 是自部署的 Serverless 平臺，其設計目標是簡化 Lambda 函數與微服務的部署、運行、維護流程。1Backend 使得開發者可以快速開發服務，其支持 Go，JavaScript，TypeScript，MySQL 等常見的技術棧。

• Prisma: Prisma 可以將數據庫轉化爲 GraphQL API；其容許用戶自定義數據模型，而後快速地轉化爲可用的 GraphQL 服務器。Prisma GraphQL API 提供了強大的數據抽象與構建塊，來輔助開發靈活可擴展的 GraphQL 服務端，包括了類型安全的 API，聲明式 DSL 的數據模型、實時接口、與流行前端框架無縫兼容等。

巔峯人生

• 對話 AI 專家洪亮劼：此次，咱們全方位聊聊人工智能: 洪亮劼，極客時間《AI 技術內參》專欄做者，電子商務平臺 Etsy 數據科學主管，前雅虎研究院高級研發經理。長期從事機器學習與人工智能的基礎以及應用研究，積累了豐富的學術研究和工業實踐經驗，對推薦系統、搜索引擎、計算廣告學、社交網絡以及天然語言處理等領域有很是深刻的理解。本文從人工智能的落地、觀點、人才培養與招聘、學習等幾個角度來聊聊人工智能。

前端之巔

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