Code-Splitting React Native Dengan Repack

Ketika anda mengembangkan aplikasi React Native kemungkinan besar anda akan menulis banyak kode JavaScript yang di dalamnya memiliki dependensi yang biasanya berasal dari repositori external seperti NPM. Kompilasi dari banyak file JavaScript dan dependensi tadi akan di proses menjadi satu file bundle yang dapat di baca oleh React Native. Di React Native kompilasi ini akan dilakukan secara default oleh Metro Bundler.

Jadi pada intinya Metro Bundler bekerja dengan cara mengambil kode sumber Anda, semua dependensi pustaka eksternal dan juga aset statis yang Anda gunakan lalu mengubahnya, mengoptimalkannya, dan mengemasnya menjadi satu bundel yang dapat dijalankan oleh React Native.

Apa Itu Code-Splitting?

Code-Splitting adalah teknik yang memungkinkan developer untuk membuat beberapa file bundle dari sumber kode yang ada, jadi bundle yang di hasilkan bukan hanya satu melainkan terdiri dari banyak file yang biasa di sebut sebagai chunck.

Secara default, semua file input Anda (kode sumber, dependensi, dan aset) digabungkan menjadi satu file. Dengan Code-Splitting, bundle tadi akan dibagi menjadi beberapa bagian yang di sebut dengan chunck. Sedangkan chunck utama (juga dikenal sebagai entry chunk) biasa disebut sebagai main bundle.

Mengapa Anda Membutuhkan Re.pack Untuk Melakukan Code-Splitting?

Seperti yang sudah di jelaskan di atas secara default React Native akan menggunakan Metro Bundler untuk melakukan bundling JavaScript. Namun sayangnya Metro Bundler tidak dapat melakukan teknik Code-Splitting secara default. Untuk dapat melakukan teknik Code-Splitting maka kita memerlukan bundler JavaScript selain dari Metro Bundler.

Apa Itu Re.pack?

Re.pack pada dasarnya adalah sebuah toolkit yang memungkinkan Anda untuk menggunakan Webpack dan fungsionalitas Code-Splitting nya untuk di aplikasikan pada React Native.

Mengapa Kita Membutuhkan Code-Splitting di React Native?

Bundel tunggal bukanlah hal yang buruk, namun seiring berkembangnya aplikasi Anda, ukuran bundel Anda akan membesar juga. Terutama jika Anda menggunakan banyak library dari pihak ketiga Anda perlu untuk sangat memperhatikan kode yang akan dimasukkan ke dalam bundel aplikasi sehingga Anda tidak secara tidak sengaja menjadikan bundle anda berukuran sangat besar sehingga butuh waktu yang lama untuk React Native memuat aplikasi Anda.

Meningkatkan Waktu Startup Aplikasi.

Jika anda memiliki masalah kinerja di area startup aplikasi Code-Splitting adalah teknik yang sangat layak dicoba ketika anda memiliki masalah tersebut.

Memindahkan kode dari bundel tunggal ke banyak potongan chunck jika di konfigurasi dengan benar dapat membuat aplikasi React Native Anda hanya akan memuat potongan kode yang diperlukan dan menunda pemuatan kode lainnya. Hal ini sangat membantu meningkatkan kinerja startup aplikasi anda.

Aplikasi Modular

Aplikasi yang mengekspos fungsionalitas yang berbeda atau UI yang berbeda berdasarkan detail pengguna adalah contoh aplikasi yang akan sangat diuntungkan dari Code-Splitting.

Mari kita ambil contoh aplikasi e-learning seperti Ruangguru. Dengan Code-Splitting, anda akan dapat memisahkan fungsi siswa dan guru di file bundle yang terpisah, sehingga aplikasi hanya memuat salah satu bundle saja, hal ini dapat meningkatkan kinerja startup dengan memuat hanya kode yang relevan dengan kebutuhan user.

Dua kelompok aplikasi lain di mana Code-Splitting memainkan peran besar adalah pada aplikasi super (seperti Gojek) dan juga aplikasi dengan toko aplikasi mini (seperti WeChat / Line). Alih-alih memiliki beberapa aplikasi di App Store dan Google Play, Anda dapat menggabungkannya menjadi satu sambil merampingkan pengembangan dan menyederhanakan pengelolaan.

Cara Menggunakan Re.pack Untuk Code-Splitting Di React Native

Bagaimana caranya menggunakan Re.pack? Langkah pertama untuk menggunakan Re.pack adalah dengan cara menginstall dependensi yang diperlukan:

npm i -D webpack terser-webpack-plugin babel-loader @callstack/repack
# or
yarn add -D webpack terser-webpack-plugin babel-loader @callstack/repack

Setelah itu, Buat react-native.config.js (jika file ini tidak ada di project anda) dan salin konten di bawah ini:

module.exports = {
  commands: require('@callstack/repack/commands'),
};

Lalu konfigurasikan XCode dan Gradle untuk menggunakan perintah webpack-bundle. Dengan melakukan perubahan ini maka anda akan menggantikan Metro Bundler default menjadi Re.pack

• XCode: Tambahkan export BUNDLE_COMMAND=webpack-bundle ke phase Bundle React Native code and images dari Build Phases dalam konfigurasi proyek XCode anda.

  export NODE_BINARY=node
  export BUNDLE_COMMAND=webpack-bundle
  ../node_modules/react-native/scripts/react-native-xcode.sh

• Gradle: Tambahkan bundleCommand: "webpack-bundle" ke dalam project.ext.react di file android/app/build.gradle,sehingga terlihat mirip dengan:

  project.ext.react = [
      enableHermes: false,  // clean and rebuild if changing
      bundleCommand: "webpack-bundle",
      bundleInDebug: false
  ]

Semua konfigurasi telah selesai. Sekarang anda Anda dapat menggunakan repack dalam aplikasi React Native anda.

Untuk menjalankan server pengembangan anda dapat menggunakan perintah

npx react-native webpack-start

Apa saja kekurangan Repack dibandingkan dengan Facebook Metro Bundler ?

Tentu saja ada beberapa kekurangan ketika kita menggunakan Code-Splitting dengan Re.pack di banding dengan Metro Bundler. Salah satu kekurangan paling besar adalah kita tidak dapat lagi menggunakan Codepush untuk melakukan Hot Push code di Production Env.

Selain intu pada waktu artikel ini di tulis jika anda menggunakan Hermes dengan Re.pack Maka dia hanya dapat mengubah Main Bundle menjadi Hermes Bytecode, file chunck di luar Main Bundle tidak akan di transformasi menjadi Hermes Bytecode.