如何將 React 應用程序加載時間減少 70-

使用代碼拆分減少 React 應用程序初始加載時間的步驟。

我們使用 React 構建大規模應用程序。在構建這些應用程序時，我們面臨的主要問題是應用程序性能。當應用程序越來越大時，性能可能會下降。尤其是應用程序的初始加載時間將受到更大的影響。初始應用程序加載需要快速，而不會向用戶顯示幾秒鐘的空白屏幕。由於加載需要更多的時間，因此會給用戶留下不好的印象。

此問題的主要原因是在單個捆綁包文件中添加了太多組件，因此加載該捆綁包文件可能需要更多時間。爲了避免此類問題，我們需要以優化的方式構造組件。爲了解決這個問題，react 本身有一個本機解決方案，即代碼拆分和延遲加載。它允許將捆綁文件拆分爲較小的大小。

引入代碼拆分的最佳位置是路由。基於路由的代碼拆分解決了一半的問題。但大多數應用程序只利用了代碼拆分 50% 的優勢。

在使用代碼拆分時，我們是否正確地構造組件？我們可以通過一些代碼示例瞭解爲什麼以及如何修復它。爲此，我們將使用帶有一些 UI 組件的示例 React 應用程序。

在下面的屏幕截圖中，我們可以看到一個儀表板組件，它有多個選項卡。每個選項卡都有多個組件。

儀表板組件使用基於路由的代碼拆分，如下所示 :

const Dashboard = lazy(() => import('components/Dashboard'));
const Settings = lazy(() => import('components/Settings'));
const Configurations = lazy(() => import('components/Configurations'));
function App() {
  return (
    <Router>
      <Layout>
        <SideBar/>
        <Layout>
          <AppHeader/>
          <Content style={{padding: '20px'}}>
            <Suspense fallback={<div>Loading...</div>}>
              <Switch>
                <Route path="/dashboard">
                  <Dashboard/>
                </Route>
                <Route path="/settings">
                  <Settings/>
                </Route>
                <Route path="/configuration">
                  <Configurations/>
                </Route>
              </Switch>
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

儀表板組件包含一些子組件，如銷售、利潤、圖表、分幅和趨勢，如下面的代碼

function Dashboard() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Sales" key="1">
        <Sales/>
      </TabPane>
      <TabPane tab="Profit" key="2">
        <Profit/>
      </TabPane>
      <TabPane tab="Chart" key="3">
        <Chart/>
      </TabPane>
      <TabPane tab="Tiles" key="4">
        <Tiles/>
      </TabPane>
      <TabPane tab="Trends" key="5">
        <Trends/>
      </TabPane>
    </Tabs>
  );
}

我們已將代碼拆分爲多個路由。因此，當捆綁應用程序時，我們會爲每個路由獲得一個單獨的構建文件，如下所示 :

儀表板組件是這個應用程序的初始頁面，因此當我們點擊應用程序 URL 405.1KB 時，文件將與標題和邊欄一起加載。

最初，用戶將只查看 Sales 選項卡，但我們的示例應用程序儀表板組件有多個選項卡。瀏覽器也在下載其他選項卡代碼，因此會延遲用戶的第一次繪製。爲了減少初始加載時間，我們需要對儀表板組件進行一些更改，如下所示 :

const Sales = lazy(() => import('components/Sales'));
const Profit = lazy(() => import('components/Profit'));
const Chart = lazy(() => import('components/Chart'));
const Tiles = lazy(() => import('components/Tiles'));
const Trends = lazy(() => import('components/Trends'));
const { TabPane } = Tabs;
function Dashboard() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Sales" key="1">
        <Suspense fallback={<div>Loading...</div>}>
          <Sales/>
        </Suspense>
      </TabPane>
      <TabPane tab="Profit" key="2">
        <Suspense fallback={<div>Loading...</div>}>
          <Profit/>
        </Suspense>
      </TabPane>
      <TabPane tab="Chart" key="3">
        <Suspense fallback={<div>Loading...</div>}>
          <Chart/>
        </Suspense>
      </TabPane>
      <TabPane tab="Tiles" key="4">
        <Suspense fallback={<div>Loading...</div>}>
          <Tiles/>
        </Suspense>
      </TabPane>
      <TabPane tab="Trends" key="5">
        <Suspense fallback={<div>Loading...</div>}>
          <Trends/>
        </Suspense>
      </TabPane>
    </Tabs>
  );
}

在這裏，我導入了延遲加載的每個選項卡組件，並用懸念包裝了該組件。爲了更好地理解，我在這裏添加了多個懸念，但是您可以對所有組件使用單個懸念。

我沒有對路由級代碼拆分進行任何更改。當我們構建應用程序時，會添加一些額外的文件，因爲我們已經延遲加載了儀表板組件中的每個選項卡。檢查下圖中的構建文件分離。

現在，讓我們使用上述更改再次使用 GTmetrix 測試應用程序。請參見下圖中的應用程序性能

如您所見，現在我們的儀表板組件在 1 秒內加載完畢。現在只加載銷售選項卡代碼。通過做一些更改，我們縮短了近 2 秒。讓我們在下圖中查看基於路由和基於路由、組件的代碼拆分的比較。

如您所見，這是應用程序初始負載的巨大改進。現在，通過在儀表板組件中有效地使用代碼拆分，我們通過一些調整將 React 應用程序的初始加載時間縮短了 70%。

結論 ： 以優化的方式構建組件並有效地使用 React API 將提高大型應用程序的性能。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XYvickcdWQYM3FrHyY8bNQ

猜你喜歡