Menetapkan anggaran performa dengan webpack

Milica Mihajlija

Webpack menggabungkan semua file yang diimpor dan memaketkannya menjadi satu atau beberapa file output yang dikenal sebagai paket. Pemaketan dapat dilakukan dengan baik, tetapi seiring dengan pertumbuhan aplikasi, paket Anda juga akan berkembang. Anda perlu memantau ukuran paket untuk memastikan ukuran paket tidak terlalu besar dan memengaruhi waktu pemuatan aplikasi. Webpack mendukung penetapan anggaran performa berdasarkan ukuran aset dan dapat mengawasi ukuran paket untuk Anda.

Untuk melihat cara kerjanya, berikut aplikasi yang menghitung sisa hari hingga Tahun Baru. Produk ini dibuat dengan React dan moment.js. (Seperti halnya aplikasi di dunia nyata yang makin bergantung pada framework dan library. 😉)

Aplikasi yang menghitung jumlah hari yang tersisa hingga hari Tahun Baru

Ukur

Codelab ini sudah berisi aplikasi yang dipaketkan dengan webpack.

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

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

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

Peringatan ini diaktifkan secara default dalam mode produksi dan nilai minimum defaultnya adalah 244 KiB tanpa kompresi, 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 berukuran besar ⚠️

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

Rekomendasi pengoptimalan performa paket web
Rekomendasi pengoptimalan performa webpack 🏏

Menetapkan anggaran performa kustom

Anggaran kinerja yang tepat akan bergantung pada sifat proyek Anda. Sebaiknya Anda melakukan riset sendiri. Aturan terbaik adalah mengirimkan resource critical-path yang dikompresi/diminifikasi di bawah 170 KB.

Untuk demo sederhana ini, cobalah untuk lebih konservatif 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 yang baru ditetapkan dalam byte:

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

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

Nilai yang mungkin untuk petunjuk adalah:

  1. warning (default): Menampilkan pesan peringatan berwarna kuning, tetapi build lulus. Sebaiknya gunakan ini di lingkungan pengembangan.
  2. error: Menampilkan pesan error berwarna merah, tetapi build masih diteruskan. 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" 🚨

Pengoptimalan

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

Framework dan library memudahkan pekerjaan developer, tetapi pengguna akhir tidak terlalu peduli dengan cara aplikasi dibangun, hanya saja, framework dan library tersebut berfungsi dan cepat. Jika Anda melebihi anggaran performa, saatnya memikirkan kemungkinan pengoptimalan.

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

Menghapus kode yang tidak digunakan adalah cara tepat untuk mengoptimalkan aplikasi yang menyertakan library pihak ketiga yang besar. Panduan Menghapus kode yang tidak digunakan menjelaskan proses ini secara mendetail dan berikut adalah 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');

Dan hapus baris ini:

const moment = require('moment');

Dibutuhkan sedikit perhitungan, tetapi Anda dapat menerapkan hitung mundur yang sama dengan vanilla JavaScript:

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 lagi di konsol untuk membangun paket yang dioptimalkan.

Akhirnya! Anda telah memotong 223 KiB (230KB) dan aplikasi 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 Anda akan mendapatkan peringatan jika (tidak sengaja) menambahkan dependensi besar. Pepatah ini "tidak terlihat, tidak teringat" tetapi webpack dapat memastikan bahwa Anda menyadari implikasi performa setiap saat.