Menayangkan kode modern ke browser modern untuk pemuatan halaman yang lebih cepat

Houssein Djirdeh

Membuat situs yang berfungsi dengan baik di semua browser utama merupakan prinsip inti dari ekosistem web terbuka. Namun, hal ini berarti pekerjaan tambahan untuk memastikan semua kode yang Anda tulis didukung di setiap browser yang akan ditargetkan. Jika ingin menggunakan fitur bahasa JavaScript baru, Anda perlu melakukan transpilasi fitur ini ke format yang kompatibel dengan versi lama untuk browser yang belum mendukungnya.

Babel adalah alat yang paling banyak digunakan untuk mengompilasi kode yang berisi sintaksis baru ke dalam kode yang dapat dipahami oleh berbagai browser dan lingkungan (seperti Node). Panduan ini mengasumsikan bahwa Anda menggunakan Babel, jadi Anda harus mengikuti petunjuk penyiapan untuk menyertakannya ke dalam aplikasi jika belum melakukannya. Pilih webpack di Build Systems jika Anda menggunakan webpack sebagai pemaket modul di aplikasi.

Untuk menggunakan Babel agar hanya melakukan transpilasi yang diperlukan bagi pengguna, Anda harus:

  1. Identifikasi browser yang ingin Anda targetkan.
  2. Gunakan @babel/preset-env dengan target browser yang sesuai.
  3. Gunakan <script type="module"> untuk berhenti mengirim kode yang ditranspilasi ke browser yang tidak membutuhkannya.

Identifikasi browser yang ingin Anda targetkan

Sebelum mulai mengubah cara kode di aplikasi ditranspilasi, Anda harus mengidentifikasi browser yang mengakses aplikasi Anda. Analisis browser yang saat ini digunakan pengguna dan browser yang ingin Anda targetkan untuk membuat keputusan yang tepat.

Menggunakan @babel/preset-env

Transpilasi kode biasanya akan menghasilkan ukuran file yang lebih besar daripada format aslinya. Dengan meminimalkan jumlah kompilasi yang Anda lakukan, Anda dapat mengurangi ukuran paket untuk meningkatkan performa halaman web.

Daripada menyertakan plugin tertentu untuk mengompilasi fitur bahasa tertentu yang Anda gunakan secara selektif, Babel menyediakan sejumlah preset yang memaketkan plugin bersama-sama. Gunakan @babel/preset-env untuk hanya menyertakan transformasi dan polyfill yang diperlukan untuk browser yang Anda rencanakan untuk penargetan.

Sertakan @babel/preset-env dalam array presets di file konfigurasi Babel, .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

Gunakan kolom targets untuk menentukan versi browser yang ingin Anda sertakan dengan menambahkan kueri yang sesuai ke kolom browsers. @babel/preset-env terintegrasi dengan daftar browser, sebuah konfigurasi open source yang digunakan bersama berbagai alat untuk menargetkan browser. Daftar lengkap kueri yang kompatibel dapat ditemukan di dokumentasi daftar browser. Opsi lainnya adalah menggunakan file .browserslistrc untuk membuat daftar lingkungan yang ingin Anda targetkan.

Nilai ">0.25%" akan memberi tahu Babel untuk hanya menyertakan transformasi yang diperlukan untuk mendukung browser dengan penggunaan lebih dari 0,25% dari penggunaan global. Hal ini memastikan paket Anda tidak berisi kode transpilasi yang tidak perlu untuk browser yang digunakan oleh sebagian kecil pengguna.

Dalam sebagian besar kasus, ini adalah pendekatan yang lebih baik daripada menggunakan konfigurasi berikut:

  "targets": "last 2 versions"

Nilai "last 2 versions" mentranspilasi kode Anda untuk dua versi terakhir dari setiap browser, yang berarti dukungan diberikan untuk browser yang dihentikan, seperti Internet Explorer. Hal ini dapat menambah ukuran paket secara tidak perlu jika Anda tidak mengira browser ini digunakan untuk mengakses aplikasi Anda.

Pada akhirnya, Anda harus memilih kombinasi kueri yang sesuai agar hanya menargetkan browser yang sesuai dengan kebutuhan Anda.

Mengaktifkan perbaikan bug modern

@babel/preset-env mengelompokkan beberapa fitur sintaksis JavaScript ke dalam koleksi dan mengaktifkan/menonaktifkan fitur tersebut berdasarkan browser target yang ditentukan. Meskipun ini berfungsi dengan baik, seluruh kumpulan fitur sintaksis diubah saat browser yang ditargetkan berisi bug hanya dengan satu fitur. Hal ini sering menghasilkan kode yang lebih banyak dari yang diperlukan.

Pada awalnya dikembangkan sebagai preset terpisah, opsi perbaikan bug di @babel/preset-env mengatasi masalah ini dengan mengonversi sintaksis modern yang rusak di beberapa browser menjadi sintaksis setara terdekat yang tidak rusak di browser tersebut. Hasilnya adalah kode modern yang hampir identik dengan beberapa penyesuaian sintaksis kecil yang menjamin kompatibilitas di semua browser target. Untuk menggunakan pengoptimalan ini, pastikan Anda telah menginstal @babel/preset-env versi 7.10 atau yang lebih baru, lalu tetapkan properti bugfixes ke true:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

Di Babel 8, opsi bugfixes akan diaktifkan secara default.

Gunakan <script type="module">

Modul JavaScript, atau modul ES, adalah fitur yang relatif baru dan didukung di semua browser utama. Anda dapat menggunakan modul untuk membuat skrip yang dapat diimpor dan diekspor dari modul lain, tetapi Anda juga dapat menggunakannya dengan @babel/preset-env untuk hanya menargetkan browser yang mendukung modul tersebut.

Daripada membuat kueri untuk versi browser atau pangsa pasar tertentu, pertimbangkan untuk menentukan "esmodules" : true di dalam kolom targets file .babelrc Anda.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

Banyak fitur ECMAScript lebih baru yang dikompilasi dengan Babel sudah didukung di lingkungan yang mendukung modul JavaScript. Jadi, dengan melakukan hal ini, Anda akan menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspilasi yang akan digunakan untuk browser yang benar-benar membutuhkannya.

Browser yang mendukung modul mengabaikan skrip dengan atribut nomodule. Sebaliknya, browser yang tidak mendukung modul akan mengabaikan elemen skrip dengan type="module". Ini berarti Anda dapat menyertakan modul serta penggantian yang dikompilasi.

Idealnya, dua skrip versi aplikasi disertakan seperti ini:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

Browser yang mendukung modul mengambil dan menjalankan main.mjs dan mengabaikan compiled.js. Browser yang tidak mendukung modul akan melakukan hal yang sebaliknya.

Jika menggunakan webpack, Anda dapat menetapkan target yang berbeda dalam konfigurasi untuk dua versi aplikasi yang terpisah:

  • Versi hanya untuk browser yang mendukung modul.
  • Versi yang menyertakan kompilasi skrip yang berfungsi di browser lama. Ini memiliki ukuran {i>file<i} yang lebih besar, karena transpilasi perlu mendukung lebih banyak jenis {i>browser<i}.

Terima kasih kepada Connor Clark dan Jason Miller atas ulasan mereka.