前端快爆
- iOS 12.2 和 Safari 12.1 中包含了更新的智慧跟蹤預防模組，它將完全防止採用跨站追蹤技術的第三方改變頂級域名中的 Cookie，只能在使用者最後互動 30 天內通過 Storage Access API 完成 Cookie 讀取；
document.cookie中建立的持久化 Cookie 將在 7 天后到期清除；此外，由於缺乏沒有技術保障，do-not-track請求頭支援被廢除。?
點評：針對常見的“這樣的改變是否將會導致使用者頻繁登出”，官方建議是採用 secure 且 httpOnly 的 cookie 進行登入狀態快取。
- 在將來的 Webpack 5，將出現持久化的儲存配置
cache: { type: "filesystem” }以優化編譯效能、實現deterministic型別的 chunkId 和 moduleId 以幫助客戶端儘可能的快取前端冷資源、支援針對 chunk 進行命名。?
點評：Webpack 配置工程師們，你們準備好了嗎！
- npm 的安全問題近年有加重跡象，因此，npm 近期發文闡述了改變被廣泛依賴的包的作者的安全危害——前有 event-stream 換作者致比特幣失竊，後有 koa-router 掛牌賣庫安全風險未知。作為契約的 semver 難以完成對 npm 包的約束，npm 因此希望和社群一起探討優化此類問題的方案，有興趣請點選這裡加入討論。?
百寶箱
- NSFW.js 是一個在前端檢查是否有色情資訊的庫，可用於圖片上傳前篩查，基於 tensorflow.js。
點評：咦，停車啦？
- lit-element 是 Polymer 提供的簡單能將 Class 包裝成 Web Component 的庫。
-
Taro UI 2.0 釋出，新增自定義主題功能，新適配了支付寶小程式、百度小程式，支援了包含日曆元件的 11 個新元件。
-
Cleave.js 是一個能夠將 input 標籤改裝成能限制輸入並格式化展現輸入的庫，有 React 和原生兩個版本。
專題：React 效能優化
使用工具分析效能瓶頸
- Chrome Performance & 教程
- React DevTools
- why-did-you-update：在控制檯檢視觸發 View 更新的原因
程式碼層面優化
- 利用 shouldComponentUpdate 和 PureComponent 避免過多 render function
- 不要直接改變 setState 資料
- 虛擬化長列表 & 常用庫 react-virtualized
- 合理組織 React Component：React Component Patterns
- 在希望發生重新渲染的 DOM 上設定同級唯一 key 以觸發重新渲染
- 儘量將 props 和 state 攤平，只傳遞 component 需要的 props，慎將 component 當作 props 傳入
程式碼體積優化
- 使用 生產版本
- 使用 webpack-bundle-analyzer 視覺化 webpack 輸出檔案的大小
- 使用動態 import，懶載入 React 元件
- 使用 Tree Shaking & 教程 & Tree Shaking 優化
- 使用 babel-plugin-import 優化業務元件的引入，實現按需載入
- 使用 SplitChunksPlugin 拆分公共程式碼
- 優化 Webpack 中的庫
- 分析 CSS 和 JS 程式碼覆蓋率
編輯：承虎 & 審閱：壹絲、冰塊 & 專題供稿：麥梓
題圖來源：evilmartians.com/chronicles/…