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

Houssein Djirdeh

Membuat situs yang berfungsi dengan baik di semua browser utama adalah prinsip inti dari ekosistem web terbuka. Namun, ini berarti pekerjaan tambahan untuk memastikan bahwa semua kode yang Anda tulis didukung di setiap browser yang ingin Anda targetkan. Jika ingin menggunakan fitur bahasa JavaScript baru, Anda perlu mentranspile 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 yang lebih baru menjadi 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 bundler modul di aplikasi.

Untuk menggunakan Babel hanya untuk mentranspile hal 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 ditranspil ke browser yang tidak memerlukannya.

Mengidentifikasi browser yang ingin Anda targetkan

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

Menggunakan @babel/preset-env

Transpilasi kode biasanya menghasilkan file yang ukurannya lebih besar daripada bentuk 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 menggabungkan plugin bersama-sama. Gunakan @babel/preset-env untuk hanya menyertakan transformasi dan polyfill yang diperlukan untuk browser yang ingin Anda targetkan.

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 browserslist, konfigurasi open source yang dibagikan di antara berbagai alat untuk menargetkan browser. Daftar lengkap kueri yang kompatibel ada di dokumentasi browserslist. Opsi lainnya adalah menggunakan file .browserslistrc untuk mencantumkan lingkungan yang ingin Anda targetkan.

Nilai ">0.25%" memberi tahu Babel untuk hanya menyertakan transformasi yang diperlukan untuk mendukung browser yang membentuk lebih dari 0,25% penggunaan global. Hal ini memastikan paket Anda tidak berisi kode transpil yang tidak diperlukan 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" mentranspile kode Anda untuk dua versi terakhir dari setiap browser, yang berarti dukungan diberikan untuk browser yang dihentikan seperti Internet Explorer. Hal ini dapat meningkatkan ukuran paket secara tidak perlu jika Anda tidak ingin 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/menonaktifkannya berdasarkan browser target yang ditentukan. Meskipun berfungsi dengan baik, seluruh kumpulan fitur sintaksis akan diubah saat browser yang ditargetkan berisi bug dengan hanya satu fitur. Hal ini sering kali menghasilkan lebih banyak kode yang ditransformasi daripada yang diperlukan.

Awalnya dikembangkan sebagai preset terpisah, opsi perbaikan bug di @babel/preset-env menyelesaikan masalah ini dengan mengonversi sintaksis modern yang rusak di beberapa browser ke 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 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 mengimpor dan mengekspor dari modul lain, tetapi Anda juga dapat menggunakannya dengan @babel/preset-env untuk hanya menargetkan browser yang mendukungnya.

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

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

Banyak fitur ECMAScript yang lebih baru yang dikompilasi dengan Babel sudah didukung di lingkungan yang mendukung modul JavaScript. Jadi, dengan melakukan hal ini, Anda menyederhanakan proses untuk memastikan bahwa hanya kode yang ditranspil yang 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". Artinya, 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 serta mengabaikan compiled.js. Browser yang tidak mendukung modul akan melakukan hal 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 skrip yang dikompilasi dan berfungsi di browser lama. File ini memiliki ukuran file yang lebih besar, karena transpilasi perlu mendukung lebih banyak browser.

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