Semua yang perlu Anda ketahui tentang pemisahan kode JavaScript

Situs modern sering menggabungkan semua javascript mereka menjadi satu, besar main.js. naskah. Ini secara teratur berisi skrip untuk semua halaman atau rute Anda, bahkan jika pengguna hanya memerlukan porsi kecil untuk halaman yang mereka lihat.

Ketika JavaScript disajikan dengan cara ini, kinerja pemuatan halaman web Anda dapat menderita - terutama dengan Desain Web Responsif pada perangkat seluler. Jadi mari kita perbaiki dengan menerapkan pemisahan kode javascript.

• Cara kode lebih cepat, lebih ringan JavaScript

Masalah apa yang dipecahkan oleh kode pemecahan?

Ketika browser web melihat a & lt; script & gt; Perlu menghabiskan waktu mengunduh dan memproses JavaScript yang Anda referensi. Ini bisa terasa cepat pada perangkat kelas atas tetapi memuat, menguraikan dan mengeksekusi kode JavaScript yang tidak digunakan dapat memakan waktu pada perangkat seluler rata-rata dengan jaringan yang lebih lambat dan CPU yang lebih lambat. Jika Anda pernah masuk ke toko kopi atau hotel WiFi, Anda tahu pengalaman jaringan yang lambat dapat terjadi pada semua orang.

Setiap detik yang dihabiskan menunggu pada JavaScript untuk menyelesaikan booting dapat menunda seberapa cepat pengguna dapat berinteraksi dengan pengalaman Anda. Ini terutama terjadi jika UX Anda bergantung pada JS untuk komponen penting atau bahkan hanya melampirkan penangan acara untuk potongan-potongan UI sederhana.

Apakah saya perlu repot dengan pembagian kode?

Pasti ada baiknya bertanya pada diri sendiri apakah Anda perlu membagi kode (jika Anda sudah menggunakan yang sederhana Pembangun Situs Web Anda mungkin tidak). Jika situs Anda memerlukan JavaScript untuk konten interaktif (untuk fitur-fitur seperti laci menu dan carousels) atau merupakan aplikasi halaman tunggal yang mengandalkan kerangka kerja JavaScript untuk membuat UI, jawabannya kemungkinan 'ya'. Apakah pemisahan kode bermanfaat untuk situs Anda adalah pertanyaan yang harus Anda jawab sendiri. Anda memahami arsitektur Anda dan bagaimana situs Anda memuat terbaik. Untungnya ada alat yang tersedia untuk membantu Anda di sini. Ingatlah bahwa jika Anda menerapkan perubahan di sistem desain Anda, simpan perubahan-perubahan tersebut di shared Anda penyimpanan awan Jadi tim Anda bisa melihat.

Mendapatkan bantuan

Untuk mereka yang baru untuk membelah kode Javascript, Mercu suar - Panel audit di alat pengembang Chrome - dapat membantu menyinari apakah ini masalah untuk situs Anda. Audit yang ingin Anda cari adalah mengurangi waktu eksekusi javascript (didokumentasikan sini ). Audit ini menyoroti semua skrip di halaman Anda yang dapat menunda pengguna berinteraksi dengannya.

PageSpeed ​​Insights. adalah alat online yang juga dapat menyoroti kinerja situs Anda - dan termasuk data lab dari mercusuar dan data dunia nyata pada kinerja situs Anda dari laporan pengalaman pengguna Chrome. Anda hosting web. Layanan mungkin memiliki opsi lain.

Cakupan Kode di Alat Pengembang Chrome

Jika sepertinya Anda memiliki skrip yang mahal yang bisa menjadi lebih baik, alat berikutnya untuk dilihat adalah fitur cakupan kode di alat pengembang Chrome (DevTools & gt; menu kanan atas & gt; lebih banyak alat & gt; coverage). Ini mengukur seberapa banyak JavaScript (dan CSS) yang tidak digunakan di halaman Anda. Untuk setiap skrip yang dirangkum, DevTools akan menunjukkan 'byte yang tidak digunakan'. Ini adalah kode yang dapat Anda pertimbangkan untuk memisahkan dan memuat malas ketika pengguna membutuhkannya.

Berbagai jenis pemisahan kode

Ada beberapa pendekatan berbeda yang dapat Anda ambil ketika datang ke kode pemecahan Javascript. Berapa banyak ini berlaku untuk situs Anda cenderung bervariasi tergantung pada apakah Anda ingin membagi halaman / aplikasi 'logika' atau membagi perpustakaan / kerangka kerja dari 'vendor' lainnya.

Pemisahan kode dinamis: Banyak dari kami mengimpor modul JavaScript dan dependensi secara statistik sehingga mereka dibundel bersama menjadi satu file di waktu pembangunan. Pemisahan kode 'dinamis' menambahkan kemampuan untuk menentukan poin dalam JavaScript Anda bahwa Anda ingin membagi dan memuat malas sesuai kebutuhan. JavaScript modern menggunakan dinamika impor() pernyataan untuk mencapai ini. Kami akan segera membahasnya.

Pembagian Kode Vendor: Kerangka kerja dan perpustakaan yang Anda andalkan pada (mis. Bereaksi, sudut, vue atau lodash) tidak mungkin untuk mengubah skrip yang Anda kirim ke pengguna Anda, seringkali sebagai 'logika' untuk situs Anda. Untuk mengurangi dampak negatif dari pembatalan cache untuk pengguna yang kembali ke situs Anda, Anda dapat membagi 'vendor' Anda ke dalam skrip terpisah.

Pemisahan kode entry-point: Entri adalah titik awal di situs atau aplikasi Anda bahwa alat seperti webpack dapat melihat untuk membangun pohon ketergantungan Anda. Pemisahan oleh entri berguna untuk halaman di mana routing sisi klien tidak digunakan atau Anda mengandalkan kombinasi server dan rendering sisi klien.

Untuk keperluan kami dalam artikel ini, kami akan berkonsentrasi pada pemisahan kode dinamis.

Dapatkan tangan dengan pemisahan kode

Mari kita optimalkan kinerja javascript a aplikasi sederhana yang memilah tiga angka Melalui pemisahan kode - ini adalah aplikasi oleh rekan saya houssein djirdeh. Alur kerja yang akan kami gunakan untuk membuat beban javascript kami dengan cepat adalah ukuran, mengoptimalkan dan memonitor. Mulai di sini .

Mengukur kinerja

Sebelum mencoba menambahkan optimasi, kami pertama kali mengukur kinerja javascript kami. Karena aplikasi Sihir Sorter diselenggarakan di Glitch, kami akan menggunakan lingkungan pengkodeannya. Inilah cara membahasnya:

• Klik tombol Tampilkan Live.
• Buka devtools dengan menekan Opsi CMD + + I / Ctrl + Shift + i.
• Pilih panel jaringan.
• Pastikan Cache Nonaktifkan diperiksa dan muat ulang aplikasi.

Aplikasi sederhana ini tampaknya menggunakan 71,2 kb Javascript hanya untuk memilah beberapa angka. Itu tentu saja tidak benar. Di sumber kami src / index.js. , perpustakaan utilitas Lodash diimpor dan kami gunakan Sortir dengan - Salah satu utilitas penyortirannya - untuk mengurutkan nomor kami. Lodash menawarkan beberapa fungsi yang berguna tetapi aplikasi hanya menggunakan metode tunggal darinya. Adalah kesalahan umum untuk menginstal dan mengimpor semua ketergantungan pihak ketiga ketika dalam kenyataannya Anda hanya perlu menggunakan sebagian kecil darinya.

Optimalkan bundel Anda

Ada beberapa opsi yang tersedia untuk memotong ukuran bundel javascript kami:

1. Tulis metode pengurutan khusus alih-alih mengandalkan perpustakaan taruhan ketiga.
2. Menggunakan Array.prototype.sort () , yang dibangun ke dalam browser.
3. Hanya mengimpor Sortir dengan Metode dari Lodash alih-alih seluruh perpustakaan.
4. Hanya unduh kode untuk menyortir ketika pengguna membutuhkannya (ketika mereka mengklik tombol).

Opsi 1 dan 2 sesuai untuk mengurangi ukuran bundel kami - ini mungkin masuk akal untuk aplikasi nyata. Untuk keperluan pengajaran, kita akan mencoba sesuatu yang berbeda. Opsi 3 dan 4 membantu meningkatkan kinerja aplikasi.

Hanya mengimpor kode yang Anda butuhkan

Kami akan memodifikasi beberapa file untuk hanya mengimpor single Sortir dengan Metode yang kita butuhkan dari Lodash. Mari kita mulai dengan mengganti Lodash. Ketergantungan dalam. package.json. :

"lodash": "^4.7.0",

dengan ini:

"lodash.sortby": "^4.7.0",

Di SRC / index.js, kami akan mengimpor modul yang lebih spesifik ini:

 js
Impor "./style.css";
Impor _ dari "Lodash";
Bubuk impor dari "Lodash.sortby"; 

Selanjutnya, kami akan memperbarui bagaimana nilai diurutkan:

 js
form.addeventlistener ("kirim", e = & gt; {
  E.PreventDefault ();
  Nilai Const = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  constedvalues ​​= _.sortby (nilai);
  ConstedValues ​​= Sortby (Nilai);
  hasil.innerhtml = `.
    & lt; h2 & gt;
      $ {SortedValues}
    & lt; / h2 & gt;
  `
}); 

Reload the Magic Numbers App, buka alat pengembang dan lihat kembali panel jaringan. Untuk aplikasi spesifik ini, ukuran bundel kami dikurangi dengan skala empat dengan sedikit pekerjaan. Tetapi masih ada banyak ruang untuk perbaikan.

Membelah kode javascript.

Webpack adalah salah satu bundler modul javascript paling populer yang digunakan oleh pengembang web saat ini. Ini 'bundel' (menggabungkan) semua modul JavaScript Anda dan aset lain ke dalam file statis, browser web dapat dibaca.

Satu bundel dalam aplikasi ini dapat dibagi menjadi dua skrip terpisah:

• Satu bertanggung jawab atas kode yang membentuk rute awal.
• Satu lagi berisi kode penyortiran kami.

Menggunakan impor dinamis (dengan impor() Kata kunci), skrip kedua bisa dimuat dengan permintaan. Di aplikasi nomor ajaib kami, kode yang membentuk skrip dapat dimuat sesuai kebutuhan ketika pengguna mengklik tombol. Kami mulai dengan menghapus impor tingkat atas untuk metode pengurutan src / index.js. :

 Impor Sortby dari "Lodash.sortby"; 

Impor dalam pendengar acara yang menembak ketika tombol diklik:

form.addeventlistener ("kirim", e = & gt; {
  E.PreventDefault ();
  impor ('lodash.sortby')
    . Kemudian (modul = & gt; module.default)
    .kemudian (SortInput ())
    .catch (err = & gt; {alert (err)});
});

Dinamika ini impor() Fitur yang kami gunakan adalah bagian dari proposal standardtrack untuk memasukkan kemampuan untuk secara dinamis mengimpor modul dalam standar bahasa JavaScript. Webpack sudah mendukung sintaks ini. Anda dapat membaca lebih lanjut tentang cara kerja impor dinamis Dalam artikel ini .

Itu impor() Pernyataan mengembalikan janji ketika diselesaikan. Webpack menganggap ini sebagai titik split yang akan pecah menjadi skrip terpisah (atau chunk). Setelah modul dikembalikan, module.default. digunakan untuk merujuk ekspor default yang disediakan oleh Lodash. . Janji itu dirantai dengan yang lain .kemudian() Memanggil A. SortInput. Metode untuk mengurutkan tiga nilai input. Di akhir rantai janji, .menangkap() dipanggil untuk menangani di mana janji ditolak sebagai hasil dari kesalahan.

Dalam aplikasi produksi nyata, Anda harus menangani kesalahan impor dinamis dengan tepat. Pesan peringatan sederhana (mirip dengan apa yang digunakan di sini) adalah apa yang digunakan dan mungkin tidak memberikan pengalaman pengguna terbaik untuk memberi tahu pengguna tentang sesuatu yang salah.

Jika Anda melihat kesalahan linting seperti "kesalahan parsing: Impor dan ekspor hanya dapat muncul di tingkat atas", ketahuilah bahwa ini disebabkan oleh sintaks impor dinamis belum diselesaikan. Meskipun webpack mendukungnya, pengaturan untuk eslint (alat linting javascript) yang digunakan oleh kesalahan belum diperbarui untuk memasukkan sintaks ini tetapi masih berfungsi.

Hal terakhir yang perlu kita lakukan adalah menulis SortInput. metode di akhir file kami. Ini harus menjadi fungsi yang mengembalikan fungsi yang mengambil metode impor dari Lodash.sortby. . Fungsi bersarang dapat mengurutkan tiga nilai input dan memperbarui DOM:

 CONS SORGINPUT = () = & gt; {
  Return (Sortby) = & gt; {
    Nilai Const = [
      input1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber.
    ];
    ConstedValues ​​= Sortby (Nilai);
    hasil.innerhtml = `.
      & lt; h2 & gt;
        $ {SortedValues}
      & lt; / h2 & gt;
    `
  };
} 

Pantau angka

Sekarang mari memuat ulang aplikasi untuk terakhir kali dan perhatikan panel jaringan. Anda harus memperhatikan bagaimana hanya bundel awal kecil yang diunduh saat aplikasi memuat. Setelah tombol diklik untuk mengurutkan nomor input, skrip / chunk yang berisi kode penyortiran akan diambil dan dieksekusi. Apakah Anda melihat bagaimana angka-angka masih disortir karena kami akan mengharapkannya?

Pemisahan kode JavaScript dan pemuatan malas dapat sangat berguna untuk memotong ukuran bundel awal aplikasi atau situs Anda. Ini dapat langsung mengakibatkan waktu pemuatan halaman yang lebih cepat untuk pengguna. Meskipun kami telah melihat menambah kode pemisahan ke aplikasi JavaScript vanili, Anda juga dapat menerapkannya pada aplikasi yang dibangun dengan perpustakaan atau kerangka kerja.

Lazy-loading dengan perpustakaan atau kerangka kerja JavaScript

Banyak kerangka kerja populer mendukung penambahan kode pemisahan dan pemuatan malas menggunakan impor dinamis dan webpack.

Inilah cara Anda malas-memuat komponen 'deskripsi' film menggunakan reaksi (dengan React.lazy () dan fitur ketegangan mereka) untuk memberikan "memuat ..." fallback sementara komponennya malas dimuat (lihat sini Untuk beberapa detail lebih lanjut):

 Impor bereaksi, {Suspense} dari 'REACT';
Keterangan const = react.lazy (() = & gt; impor ('./ Description'));
aplikasi fungsi () {
  kembali (
    & lt; div & gt;
      & lt; h1 & gt; film saya & lt; / h1 & gt;
      & lt; suspense fallback = "Memuat ..." & gt;
        & lt; deskripsi / & gt;
      & lt; / Suspense & gt;
    & lt; / div & gt;
  );
} 

Pemisahan kode dapat membantu mengurangi dampak JavaScript pada pengalaman pengguna Anda. Pasti mempertimbangkannya jika Anda memiliki bundel JavaScript yang lebih besar dan ketika ragu, jangan lupa untuk mengukur, mengoptimalkan, dan memantau.

Artikel ini awalnya diterbitkan dalam masalah 317 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 317 di sini atau berlangganan di sini .

Artikel terkait:

• 9 dari kerangka kerja JavaScript terbaik
• 15 alat JavaScript penting yang harus Anda gunakan
• 14 dari API JavaScript terbaik