# Langkah Mudah Mengurangi Waktu Loading Aplikasi React Sebesar 70%

Langkah-langkah untuk mengurangi intial loading time di aplikasi React.

Ketika kita membangun `large-scale` aplikasi menggunakan React, masalah yang sering kita temui adalah peforma aplikasi. Ketika aplikasi timbuh besar dan besar lagi, kinerjanya mungkin memburuk. Terutama initial loading time aplikasi akan lebih terpengaruh. Initial loading time harus cepat tanpa menampilkan blank screen ke pengguna. Karena mangambil banyak waktu untuk memuat akan menciptakan kesan yang buruk bagi pengguna.

Penyebab utama dari masalah ini adalah menambahkan terlalu banyak komponen kedalam satu bundle file, jadi loading dari bundle file tersebut mungkin memakan banyak waktu. Untuk menyelesaikan masalah ini React memiliki solusinya, yaitu `code-splitting` dan `lazy loading`. Yang memungkinkan pemisahan bundle file menjadi ukuran yang lebih kecil.

Tempat terbaik untuk memperkenalkan `code-splitting` adalah di route. `Route-basecode-splitting` menyelesaikan sebagian masalah ini. Tapi sebagian besar apikasi hanya memanfaatkan **50%** dari keuntungan `code-splitting`.

Pertanyaanya, apakah kita menyusun komponen dengan benar saat menggunakan `code-splitting`? Kita akan lihat kenapa dan bagaimana menyelesaikanya menggunakan beberapa contoh kode. Untuk itu, kita akan menggunakan sebuah contoh aplikasi React dengan beberapa komponen `UI`.

Dari screenshoot dibawah, kita dapat lihat sebuah komponen dashboard, yang memiliki banyak tab. Setiap tab memiliki banyak komponen.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--i7I9ESxb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m86yxfplki8f6m4y85ps.png align="left")

Dashboard komponen tersebut menggunakan `route-basecode-splitting` seperti kode dibawah ini.

```javascript
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>
  );
}
```

Dashboard komponen bersisi beberapa sub-komponen seperti Sales, Profit, Chart, Tiles dan Trend sepertu kode dibawah ini.

```javascript

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>
  );
}
```

Kita harus *split* kode kedalam *route*. Jadi ketika aplikasi di *bundle*, kita mendapatkan *filebuild* terpisah untuk setiap *route*, seperti dibawah ini.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--6mGWrJJd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilf5k7rggx1l1zv2zccb.png align="left")

Dari gambar diatas, ukuran *file***405.1KB** adalah dashboard komponen dan file yang lainnya untuk Header, Sidebar, komponen lain dan css.

Ketika aplikasi di *host* di [Netlify](https://www.netlify.com/) untuk menguji kinerjanya. Seolah-olah kita sudah menguji di lokal dan tidak ada perbedaan. Ketika kita test aplikasi yang di host menggunakan [GTmetrix](https://gtmetrix.com/), dashboard screen butuh 2.9 detik untuk di *load*, Silahkan lihat gambar di bawah untuk *frame by frame loading.*

![](https://res.cloudinary.com/practicaldev/image/fetch/s--18w70Ipx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfgai6a0xk1w7gfbvz10.png align="left")

Komponen dashboard adalah halaman awal aplikasi, jadi ketika kita mengunjungi webistenya **405.1 KB** akan di *load* bersama dengan header dan sidebar.

Awalnya user haya akan melihat tab Sales, tapi contoh dashboard komponen aplikasi memiliki banyak tab. Jadi browser mendownload komponen yang lain juga, itu menunda aplikasi ke user. Untuk mengurangi *initial laod time*, Kita membutuhkan beberapa perubahan di dashboard komponen seperti dibawah ini.

```javascript
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>
  );
}
```

Disini kita telah mengimport setiap komponen dengan `lazy loading` dan membungkus komponen dengan `suspend`.

> Disini kita telah menambahkan banyak suspend untuk pemahaman yang lebih baik, tapi kita bisa menggunakan satu `sunpend` untuk semua komponen.

Kita belum melakukan perubahan apapun pada `code-splitting` tingkat *route*. Ketika aplikasi di *build*, beberapa tambahan *files* akan ditambahkan karena kita telah me mgimplementasi `lazy-loaded` disetiap tab di dashboard komponen. Silahkan cek gambar dibawah untuk build file separation.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--8cA6EaTl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/268n08iakvetd2hd0b5k.png align="left")

Sekarang kita test lagi aplikasi dengan [GTmetrix](https://gtmetrix.com/) dengan perubahan diatas. Lihat kinerja aplikasi pada gambar dibawah.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--btIPAr9n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi2z7p6rtx8gp1h31fox.png align="left")

Seperti yang kita lihat, sekarang dashboard komponen di muat dalam 1 second, karena hanya kode tab Sales yang diload. Kita telah mengurangi hanpir **2 detik** denga nmembuat beberapa perubahan. Mari kita lihat perbandingan dari route-base dan route, `component-basecode-splitting` pada gambar dibawah ini.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--rtbgP-xh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/refnafbfm38huv20sajl.png align="left")

`Route Based code-splitting`

![](https://res.cloudinary.com/practicaldev/image/fetch/s--IoWYsBzW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2agdjoxwnu2h98543s6.png align="left")

`Route and component-based code-splitting`

Seperti yang kita lihat, ini adalah peningkatan besar dalalm *initial load* aplikasi, Sekarang kami telah mengurangi waktu buka awal aplikasi React hingga 70% dengan beberapa penyesuaian dengan menggunakan `code-splitting` secara efektif di komponen dashboard.

### Referensi

* [Code Splitting](https://reactjs.org/docs/code-splitting.html#code-splitting)
    
* [First Contentful Paint](https://gtmetrix.com/blog/first-contentful-paint-explained/)
    
* [https://dev.to/nilanth/how-to-reduce-react-app-loading-time-by-70-1kmm](https://dev.to/nilanth/how-to-reduce-react-app-loading-time-by-70-1kmm)
    

### Kesimpulan

Menyusun komponen dengan cara yang dioptimalkan dan menggunakan React API secara efektif akan meningkatkan kinerja aplikasi skala besar.