Belajar Code Splitting dengan Webpack

Overview: Pada episode ini, kita akan belajar mengenai code splitting dan bagaimana fitur ini dapat membantu memecah kode menjadi bundle yang lebih kecil untuk meningkatkan performa website.

Pengertian Code Splitting

• Code splitting adalah fitur Webpack yang memungkinkan kita untuk memecah kode menjadi bermacam-macam bundle agar dapat di-load secara online atau secara paralel.

• Tujuan dari code splitting adalah untuk mendapatkan bundle yang ukurannya lebih kecil sehingga kita bisa mengendalikan resource agar di load sesuai dengan prioritasnya.

• Dengan menggunakan code splitting secara benar, kita akan mendapatkan dampak yang sangat besar pada waktu load dari website kita.

Pendekatan Code Splitting

• Ada tiga pendekatan umum dari code splitting:

• Melakukan code splitting lewat entry points

• Menghindari duplikasi menggunakan fitur splitChunksPlugin

• Melakukan dynamic imports untuk membagi kodenya menggunakan pemanggilan fungsi inline di dalam modul.

Implementasi Code Splitting

• Untuk melakukan implementasi code splitting, pertama-tama buka file JavaScript entry point dan pindahkan library atau modul pendukung ke file baru bernama vendor.js.

• Kemudian, panggil library tersebut di index.js dengan require terhadap vendor. Hal ini akan membuat semua library yang ada di vendor cukup import sekali saja.

• Dengan cara ini, file JavaScript isinya hanya file JavaScript milik kita saja, sehingga performa website akan meningkat.

Menyimpan pack.konfig.cs sebelum diedit

Ikhtisar Bagian: Pada bagian ini, kita akan menyimpan pack.konfig.cs sebelum diedit dan melihat dokumentasinya lagi.

Mengubah Nama File Entry Point

• Jika kita memiliki lebih dari satu file di dalam file source, seperti javascript dengan nama file "another modul" atau "vendor", maka kita harus membungkusnya ke dalam sebuah objek.

• Kita harus mengganti penamaan file entry point menjadi variabel supaya tidak bentrok dengan yang lainnya.

• Penamaan juga harus diganti di Def dan Probe karena penamaannya ada di situ.

Build Aplikasi

Ikhtisar Bagian: Pada bagian ini, kita akan membangun aplikasi setelah melakukan perubahan pada konfigurasi.

Build Aplikasi

• Jalankan perintah npm run dev untuk membangun aplikasi.

• Setelah proses build selesai, jalankan server menggunakan perintah npm run server.

Melakukan Kode Splitting

Ikhtisar Bagian: Pada bagian ini, kita akan melakukan kode splitting dengan menambahkan library baru ke dalam aplikasi.

Menambah Library Baru

• Misalnya kita ingin menambahkan library JavaScript untuk melakukan efek tilt, kita dapat menambahkan library vanilla tilt.

• Install library vanilla tilt melalui NPM dan impor di bagian vendor.

Kesimpulan

Dalam video ini, kita belajar tentang cara menyimpan pack.konfig.cs sebelum diedit dan mengubah nama file entry point. Selain itu, kita juga membangun aplikasi setelah melakukan perubahan pada konfigurasi dan melakukan kode splitting dengan menambahkan library baru ke dalam aplikasi.

Menyimpan Data ke Image

Overview: Pada bagian ini, kita menyelesaikan proses copy data dan menyimpannya ke dalam Image. Selanjutnya, kita melakukan build dengan NPM Run Dev dan NPM Run.

Build Project

• Copy data dan simpan ke Image.

• Tambahkan library tilt.js ke vendor.js.

• Jalankan code splitting untuk mencegah duplikasi pada multiple entries.

Multiple Entries

Overview: Pada bagian ini, kita membahas cara menjalankan multiple entries pada aplikasi JavaScript.

Menjalankan Multiple Entries

• Jalankan multiple entries pada aplikasi JavaScript.

• Buat file baru bernama Hello.cs di folder yang sama dengan index.js.

• Tambahkan entry point baru pada config dengan nama Hello.cs.

• Build project setelah mengubah konfigurasi.

Menggunakan Library yang Sama

Overview: Pada bagian ini, kita membahas cara menggunakan library yang sama pada dua file JavaScript yang berbeda.

Menggunakan Library yang Sama

• Install library Lodash menggunakan npm i save lodash.

• Gunakan fungsi toUpper dari Lodash untuk membuat tulisan menjadi huruf besar di Index.js.

• Import Lodash pada file JavaScript yang membutuhkan.

• Jalankan fungsi Lodash pada Hello.cs.

Menjalankan Server

Overview: Pada bagian ini, kita menjalankan server dan melihat hasil dari perubahan yang telah dilakukan.

Menjalankan Server

• Jalankan server dengan NPM Run Server.

• Cek hasil perubahan di website dan konsol browser.

Mencari Data dari Mahasiswa Rei

Overview: Pada bagian ini, kita belajar cara mencari data mahasiswa dengan menggunakan underscore titik find.

Mencari Data Mahasiswa

• Gunakan underscore titik find untuk mencari data dari mahasiswa Rei.

• Ketika menemukan data yang dicari, hasilnya akan ditampilkan oleh si lodesnya.

Masalah Duplikasi Library

Overview: Bagian ini membahas masalah duplikasi library dan cara mengatasinya.

Masalah Duplikasi Library

• Saat build, terdapat duplikasi library di dalam main.cs dan hello.cs.

• Untuk mencegah duplikasi, tambahkan key depend on pada file mana yang bergantung pada file lain.

• Tambahkan objek untuk menyatakan dependensi antar file di dalam konfigurasi.

• Dengan begitu, kita dapat melakukan deduplication atau penghapusan duplikat.

Mengoptimalkan Script dengan Code Splitting

Overview: Bagian ini membahas tentang code splitting dan bagaimana mengoptimalkan script dengan teknik tersebut.

Code Splitting

• Code splitting memungkinkan kita untuk mengekstrak dependensi yang umum atau sama ke dalam entri yang ada.

• Hal ini memungkinkan kita untuk melakukan deduplication atau penghapusan duplikat.

• Contohnya adalah library yang diekstrak menjadi satu file sendiri supaya tidak ada duplikat.

Mengoptimalkan Script dengan Code Splitting

• Lakukan optimisasi split change untuk mengekstrak script-script yang digunakan secara bersamaan di script lain.

• Include file yang panjang tadi agar dia nyari irisannya dari setiap script yang sama dan keluarin jadi satu javascript sendiri ada vendor ada Hello ada share.

• Dengan begitu, kita dapat mengoptimalkan script dengan teknik code splitting.

Kesimpulan

Overview: Pada bagian ini, disimpulkan bahwa code splitting adalah fitur penting untuk diterapkan dalam aplikasi.

Kesimpulan

• Code splitting adalah fitur penting untuk diterapkan dalam aplikasi.

• Dengan menggunakan teknik code splitting, kita dapat mengoptimalkan script dan mencegah duplikasi library.

Dalam tugas ini, saya akan membuat catatan ringkas dari transkrip yang diberikan. Saya akan menggunakan bahasa Indonesia dan format markdown untuk membuat catatan yang jelas dan mudah dipahami. Saya akan memanfaatkan timestamp jika tersedia untuk membantu orang lain dalam mempelajari transkrip tersebut.

Berikut adalah struktur markdown yang akan saya gunakan:

Judul

Ringkasan Bagian: ... (ditulis dalam bahasa transkrip)

Judul Subtopik

• Gunakan poin-poin untuk memberikan deskripsi detail tentang poin-poin kunci dan wawasan. Setiap poin adalah tautan ke bagian video yang sesuai dan akan dimulai dengan: . XXXXs adalah jumlah detik bilangan bulat. Lakukan pekerjaan terbaik Anda untuk mengaitkan t=XXs dengan timestamp yang benar yang disediakan untuk setiap transkrip. Hindari maju dengan timestamp.

Ulangi struktur di atas jika diperlukan, dan gunakan subjudul untuk mengorganisir catatan Anda. Jangan memiliki terlalu banyak bagian. Telusuri transkrip secara kronologis dan jangan mencampurkan bagian-bagian.

Tips Format:

• Pastikan setiap bagian tidak memiliki lebih dari 4 poin-poin penting. Setiap poin harus tidak lebih dari 25 kata.

• Gunakan [] untuk menunjukkan timestamp dan () untuk menautkan ke bagian video yang sesuai.

• Gunakan subjudul dan poin-poin penting untuk mengorganisir catatan Anda agar lebih mudah dibaca dan dipahami. Jika relevan, sertakan timestamp untuk menautkan ke bagian video yang sesuai.

• Gunakan poin-poin penting untuk menjelaskan langkah-langkah dan wawasan penting, sekomprehensif mungkin.

• Sertakan timestamp dengan menautkan ke timestamp yang relevan dalam blok menggunakan format , terutama untuk poin-poin penting.

Tips Ringkasan:

• Jangan menyebutkan apa pun jika hanya memutar musik dan jika tidak ada yang terjadi jangan masukkan dalam catatan.

• Gunakan hanya konten dari transkrip. Jangan menambahkan informasi tambahan.

• Judul harus informatif atau bahkan sebuah pertanyaan yang dijawab oleh video tersebut.

• Judul tidak boleh menjadi kesimpulan karena Anda mungkin hanya mendapatkan sebagian kecil dari video tersebut.

• Sebutkan dan sertakan timestamp dengan menautkan ke timestamp yang relevan dalam blok menggunakan format , terutama untuk poin-poin penting.

• Jadilah singkat dan hindari membuat terlalu banyak bagian.

• Pastikan bahasa ringkasan dan catatan studi serta judulnya adalah dalam bahasa transkrip.