想要使您的React網站更高效嗎？這是一個快速檢查清單 - houssein

banq發表於2019-12-21
React網站

  1. 使用以下任一方法來評估元件級渲染效能：
    • Chrome DevTools“效能”皮膚
    • React DevTools分析器
  2. 儘量減少不必要的元件重新渲染

    • 適當時機覆蓋shouldComponentUpdate
    • 類元件使用PureComponent
    • 功能部件使用React.memo
    • 記憶Redux選擇器（例如使用reselect）
    • 虛擬化超長列表（如使用react-window）
  3. 使用Lighthouse評估應用程式級效能
  4. 提高應用程式級效能

    • 如果您不是伺服器端渲染，請使用 React.lazy
    • 如果您是伺服器端渲染，請使用類似的庫拆分元件 loadable-components
    • 使用服務工作者來快取值得快取的檔案。Workbox將使您的生活更輕鬆。
    • 如果您是伺服器端渲染，請使用流而不是字串（帶有renderToNodeStream和renderToStaticNodeStream）
    • 不能SSR嗎？而是預渲染。像這樣的圖書館react-snap可以提供幫助。
    • 如果使用CSS-in-JS庫，請提取關鍵樣式。
    • 確保您的應用程式可訪問。考慮使用像React A11y和這樣的庫react-axe。
    • 如果您認為使用者希望通過其裝置主螢幕訪問您的網站，請新增一個Web應用清單。

    詳細使用點選標題見原文

     

    5. 相關文章