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.

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

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.


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.

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 untuk menguji kinerjanya. Seolah-olah kita sudah menguji di lokal dan tidak ada perbedaan. Ketika kita test aplikasi yang di host menggunakan GTmetrix, dashboard screen butuh 2.9 detik untuk di load, Silahkan lihat gambar di bawah untuk frame by frame loading.

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.

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.

Sekarang kita test lagi aplikasi dengan GTmetrix dengan perubahan diatas. Lihat kinerja aplikasi pada gambar dibawah.

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.

Route Based code-splitting

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

Kesimpulan

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

Langkah Mudah Mengurangi Waktu Loading Aplikasi React Sebesar 70%

Tips Efektif untuk Mempercepat Waktu Loading Aplikasi React hingga 70%

Referensi

Kesimpulan