Code Profiling
Code profiling biasanya dilakukan untuk mengukur performa dari sebuah aplikasi tanpa menambah code ke dalam aplikasi tersebut. Profiler dapat melihat seberapa banyak sebuah method dijalankan dan berapa lamanya method itu berjalan. Profiler juga melacak berbagai macam hal seperti garbage collection dan pengalokasian memori.
Manfaat Code Profiling
Alasan utama dari penggunaan code profiling adalah untuk meningkatkan kinerja sebuah aplikasi. Dengan menggunakan code profiling, kita dapat mengetahui bagian mana yang menambah beban besar kepada CPU. Bagian tersebut lalu dapat kita optimisasi.
Optimasi yang Dapat Dilakukan
- Code Splitting
Pada proses building, React akan mengubah seluruh code kita menjadi sebuah bundle. Jika kita memiliki banyak component dan banyak code, maka ukuran dari bundle tersebut akan meningkat. Hal yang dapat dilakukan untuk mengatasi kondisi tersebut adalah dengan melakukan code splitting. Teknik ini akan membuat code kita terbagi menjadi beberapa bundle yang lebih kecil sehingga browser akan men-download script-script bundle tersebut secara on demand. Teknik ini dapat dilakukan dengan cara mengimplementasikan dynamic import di dalam code.
2. Menggunakan Production Build
Penting untuk diingat bahwa server development yang dijalankan oleh React dengan command “npm start” merupakan hasil build React App yang berat karena build tersebut perlu melakukan hal-hal seperti warning, error stacktrace yang jelas, dan hot-reloading. Untuk server yang dijalankan di environment production, maka perlu dilakukan command “npm run build” untuk membuat build React App yang jauh lebih efisien.
3. Menggunakan Gambar yang Sesuai Ukuran
Teknik ini tidak berlaku kepada React App saja, tetapi kepada metode frontend development lainnya. Gambar yang memiliki ukuran pixel dan resolusi yang besar tentu saja akan memiliki ukuran (MB atau KB) yang besar juga. Jika gambar ini digunakan untuk mengisi space yang kecil, maka gambar dengan kualitas sebagus itu akan percuma, sedangkan browser tetap harus mendownload gambar yang memiliki ukuran yang besar tersebut.
Perlu diketahui bahwa metode-metode optimasi di atas hanya dapat mengurangi beban network saja. Untuk mengurangi beban CPU atau GPU perlu dilakukan optimasi yang lebih baik lagi.
