Menetapkan anggaran performa dengan webpack

Milica Mihajlija

Webpack menggabungkan semua file yang diimpor dan memaketkannya menjadi satu atau beberapa file output yang dikenal sebagai bundle. Penggabungan memang bagus, tetapi seiring perkembangan aplikasi, bundle Anda juga akan bertambah. Anda perlu memantau ukuran paket untuk memastikan ukurannya tidak terlalu besar dan memengaruhi waktu yang diperlukan aplikasi Anda untuk dimuat. Webpack mendukung penetapan anggaran performa berdasarkan ukuran aset dan dapat memantau ukuran paket untuk Anda.

Untuk melihat cara kerjanya, berikut adalah aplikasi yang menghitung sisa hari hingga Tahun Baru. Aplikasi ini dibuat dengan React dan moment.js. (Sama seperti aplikasi dunia nyata yang semakin mengandalkan framework dan library. 😉)

Aplikasi yang menghitung sisa hari hingga Hari Tahun Baru

Ukur

Codelab ini sudah berisi aplikasi yang di-bundle dengan webpack.

  1. Klik Remix to Edit untuk membuat project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).
  3. Untuk mendapatkan daftar aset yang diberi kode warna dan ukurannya, ketik webpack di konsol.
webpack

Bundle utama ditandai dengan warna kuning karena lebih besar dari 244 KiB (250 KB).

Output Webpack yang menampilkan ukuran bundle 323 KiB
Webpack memperingatkan Anda tentang paket JS yang besar ⚠️

Peringatan ini diaktifkan secara default dalam mode produksi dan nilai minimum defaultnya adalah 244 KiB yang tidak dikompresi, untuk aset dan titik entri (kombinasi semua aset yang digunakan selama pemuatan awal halaman).

Peringatan Webpack bahwa aset melebihi batas ukuran yang direkomendasikan
Webpack memperingatkan Anda tentang paket JS yang besar ⚠️

Webpack tidak hanya akan memperingatkan Anda, tetapi juga akan memberikan rekomendasi tentang cara memperkecil ukuran paket Anda. Anda dapat mempelajari lebih lanjut teknik yang direkomendasikan di Dasar-Dasar Web.

Rekomendasi pengoptimalan performa Webpack
Rekomendasi pengoptimalan performa webpack 💁

Menetapkan anggaran performa kustom

Anggaran performa yang sesuai akan bergantung pada sifat proyek Anda. Sebaiknya lakukan riset sendiri. Aturan praktis yang baik adalah mengirimkan resource jalur kritis yang dikompresi/diperkecil dengan ukuran kurang dari 170 KB.

Untuk demo sederhana ini, coba lebih berhemat dan tetapkan anggaran ke 100 KB (97,7 KiB). Di webpack.config.js, tambahkan kode berikut:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Anggaran performa baru ditetapkan dalam byte:

  • 100.000 byte untuk aset individual (maxAssetSize)
  • 100.000 byte untuk titik entri (maxEntrypointSize)

Dalam hal ini, hanya ada satu paket yang juga berfungsi sebagai titik entri.

Kemungkinan nilai untuk hints adalah:

  1. warning (default): Menampilkan pesan peringatan berwarna kuning, tetapi build lulus. Sebaiknya gunakan ini di lingkungan pengembangan.
  2. error: Menampilkan pesan error merah, tetapi build tetap lulus. Setelan ini direkomendasikan untuk build produksi.
  3. false: Tidak ada peringatan atau error yang ditampilkan.
Error performa Webpack dalam font merah
Petunjuk performa Webpack "error" 🚨

Optimalkan

Tujuan anggaran performa adalah untuk memperingatkan Anda tentang masalah performa sebelum masalah tersebut terlalu sulit diperbaiki. Selalu ada lebih dari satu cara untuk membangun aplikasi dan beberapa teknik akan menghasilkan waktu pemuatan yang lebih cepat. (Banyak di antaranya didokumentasikan di sini dalam Mengoptimalkan JavaScript Anda. 🤓)

Framework dan library mempermudah pekerjaan developer, tetapi pengguna akhir tidak terlalu peduli dengan cara aplikasi dibuat, yang penting aplikasi tersebut berfungsi dan cepat. Jika Anda melampaui anggaran performa, saatnya memikirkan kemungkinan pengoptimalan.

Di dunia nyata, framework sisi klien yang besar biasanya sulit diganti, jadi penting untuk menggunakannya dengan bijak. Dengan sedikit riset, Anda sering kali dapat menemukan alternatif yang lebih kecil untuk library populer yang fungsinya sama baiknya (date-fns adalah alternatif yang baik untuk moment.js). Terkadang, tidak menggunakan framework atau library sama sekali lebih masuk akal jika hal tersebut memiliki dampak performa yang signifikan.

Menghapus kode yang tidak digunakan adalah cara yang baik untuk mengoptimalkan aplikasi yang menyertakan library pihak ketiga berukuran besar. Panduan Menghapus kode yang tidak digunakan menjelaskan proses ini secara mendetail dan berikut cara cepat untuk menulis ulang kode hitung mundur tanpa menggunakan moment.js.

Di app/components/Countdown.jsx, hapus:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Lalu hapus baris ini:

const moment = require('moment');

Memang perlu sedikit penghitungan, tetapi Anda dapat menerapkan penghitung mundur yang sama dengan JavaScript vanilla:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Sekarang hapus moment.js dari package.json dan jalankan webpack di konsol lagi untuk membuat bundle yang dioptimalkan.

Akhirnya! Anda telah mengurangi ukuran aplikasi sebesar 223 KiB (230 KB) dan aplikasi berada di bawah anggaran.🎉

Output ukuran paket Webpack setelah pengoptimalan adalah 97,7 KiB

Memantau

Menyiapkan anggaran performa di webpack hanya memerlukan beberapa baris kode dan akan memperingatkan Anda jika Anda (secara tidak sengaja) menambahkan dependensi besar. Pepatah mengatakan "jauh di mata, jauh di hati", tetapi webpack dapat memastikan bahwa Anda selalu menyadari implikasi performa.