前端技術週刊 2019-03-04：React 性能優化

前端快爆

• 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/…