Banyak dari aplikasi React menggunakan alat bantu Webpack, Rollup dan Browserify untuk “membundel” filenya. Pembundelan ini adalah sebuah proses yang menelusuri sejumlah file yang terimpor dan digabungkan menjadi sebuah file: sebuah “bundel” atau Bundle. Bundel ini kemudian dapat digunakan dalam halaman web untuk memuat keseluruhan aplikasi sekaligus.
Sedangkan Code-Splitting adalah sebuah fitur yang didukung oleh bundler semacam Webpack, Rollup dan Browserify (menggunakan factor-bundle) yang memungkinkan pembuatan banyak bundel yang dapat dimuat secara dinamis saat runtime.
Code-splitting pada aplikasi kalian dapat dimanfaatkan untuk melakukan “lazy-load” untuk memuat hanya hal-hal yang sedang dibutuhkan oleh pengguna saja, yang dapat meningkatkan performa aplikasi kalian secara drastis. Jumlah kode pada aplikasi kalian memang tidak berkurang, namun dengan cara itu dapat mengurangi proses untuk memuat kode yang bahkan tidak dibutuhkan oleh pengguna, serta mengurangi jumlah kode yang dimuat pada proses inisialisasi awal.
1import()
Cara terbaik untuk memperkenalkan code-splitting ke dalam aplikasi kalian adalah dengan menggunakan sintaks dynamic import().
Sebelum:
import { add } from './math';
console.log(add(16, 26));Sesudah:
import("./math").then(math => {
console.log(math.add(16, 26));
});Ketika Webpack membaca sintaks ini, maka proses code-splitting pada aplikasi kalian akan dijalankan. Jika kalian menggunakan Create React App, pengaturan ini sudah tersedia dan kalian bisa langsung menggunakannya. Pengaturan ini juga disediakan di Next.js.
Jika kalian membuat sendiri pengaturan Webpack kalian, kalian mungkin dapat melihat panduan untuk melakukan code-splitting ini. Pengaturan Webpack kalian kira-kira akan terlihat mirip seperti ini.
Jika menggunakan Babel, kalian perlu memastikan apakah Babel dapat membaca sintaks dynamic import ini namun tidak mengubahnya. Untuk itu kalian memerlukan babel-plugin-syntax-dynamic-import.
