Fakultas Ilmu Komputer UI

Commit 61772ca9 authored by Fata Nugraha's avatar Fata Nugraha
Browse files

Add new blogpost: Code Splitting

parent aa587651
Pipeline #13464 passed with stages
in 3 minutes and 3 seconds
---
layout: post
title: Code Splitting
date: 2019-04-15 02:38:27 +0700
author: Fata Nugraha
---
Setelah menyadari aplikasi frontend kami yang dibuat menggunakan React tanpa
Server Side Rendering (SSR) cukup berat diawal load, maka perlu ada optimisasi
yang dilakukan agar User Experience pengguna semakin bagus.
![before](/assets/images/2019-04-15-code-splitting/before.png)
<!--more-->
Untuk menyamakan environment benchmarking, pada post ini kami men-throttling
network pada Developer Tools Chrome menjadi Fast 3G dan mendisable gzip
compression pada bundle.
Pada kondisi awal, seperti yang ditunjukkan oleh gambar pertama, aplikasi kami
membutuhkan waktu 15 detik sebelum pengguna dapat melakukan interaksi apapun
dengan aplikasi kami.
Salah satu faktor yang membuat aplikasi kami lama yaitu user harus mendownload
bundle javascript sebesar 1.4 MB yang berisi keseluruhan aplikasi, padahal user
tidak membutuhkan semua fitur pada saat membuka aplikasi kita, sebagai contoh,
user yang belum terautentikasi akan hanya melihat halaman login atau hanya
memerlukan halaman Home untuk user yang terautentikasi.
Dari kasus ini salah satu hal yang bisa kita improve adalah hanya memberikan
bagian kode yang hanya diperlukan user dan memberikan kode fitur lainnya saat
user membutuhkannya.
Teknik ini disebut dengan **code splitting**. Tujuan dari code splitting adalah
memperkecil bundle kode javascript sehingga aplikasi kita dapat lebih cepat
interaktif.
React menyediakan fungsi bawaan untuk melakukan **code splitting** yaitu dengan
fungsi `React.lazy` yang dapat dibaca lebih lanjut
[disini](https://reactjs.org/docs/code-splitting.html).
Setelah dilakukan code splitting, kami dapat memangkas 700 KB dari bundle
dan 9 detik dari waktu loading.
![after](/assets/images/2019-04-15-code-splitting/after.png)
Before:
```
File sizes after gzip:
473.83 KB build/static/js/2.6280fa66.chunk.js
28.25 KB build/static/css/2.55cee984.chunk.css
8.14 KB build/static/js/main.138357dc.chunk.js
2.04 KB build/static/css/main.6c07e551.chunk.css
762 B build/static/js/runtime~main.a8a9905a.js
```
After:
```
File sizes after gzip:
284.27 KB build/static/js/3.d5539bbd.chunk.js
196.36 KB build/static/js/2.ae7bd9a1.chunk.js
63.38 KB build/static/js/5.3a5f1162.chunk.js
43.88 KB build/static/js/8.812294d7.chunk.js
28.24 KB build/static/css/2.a4381134.chunk.css
5.11 KB build/static/js/4.4f13253e.chunk.js
3.03 KB build/static/js/main.10dfbee7.chunk.js
1.57 KB build/static/js/6.50a37c8a.chunk.js
1.5 KB build/static/js/runtime~main.a7fea907.js
1.18 KB build/static/js/7.521c2091.chunk.js
1.16 KB build/static/css/main.77d22516.chunk.css
818 B build/static/css/4.b8d0743a.chunk.css
507 B build/static/css/5.d65de2bc.chunk.css
501 B build/static/css/7.6c44fd04.chunk.css
239 B build/static/css/6.fb7a2689.chunk.css
```
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment