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. Pemaketannya rapi, tetapi seiring pertumbuhan aplikasi, paket Anda juga akan bertambah. Anda perlu memantau ukuran paket untuk memastikan ukuran tidak bertambah terlalu besar dan memengaruhi waktu yang diperlukan untuk memuat aplikasi. Webpack mendukung penetapan anggaran performa berdasarkan ukuran aset, sehingga dapat memantau ukuran paket Anda.

Untuk melihat cara kerjanya, berikut aplikasi yang menghitung sisa hari hingga Tahun Baru. Dibangun dengan React dan moment.js. (Sama seperti aplikasi dunia nyata yang semakin bergantung pada framework dan library. 😉)

Aplikasi yang menghitung hari tersisa hingga Hari Tahun Baru

Ukur

Codelab ini sudah berisi aplikasi yang dipaketkan dengan webpack.

  1. Klik Remix untuk Mengedit agar project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin harus menggunakan opsi Layar Penuh).
  3. Untuk mendapatkan daftar aset yang 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 yang besar ⚠️

Peringatan ini diaktifkan secara default dalam mode produksi dan batas defaultnya adalah 244 KiB tanpa kompresi, untuk aset dan titik entri (kombinasi dari semua aset yang digunakan selama pemuatan awal halaman).

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

Webpack tidak hanya 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 Webpack
Rekomendasi pengoptimalan performa Webpack 🔮

Menetapkan anggaran performa kustom

Anggaran performa yang sesuai akan bergantung pada sifat proyek Anda. Sebaiknya Anda melakukan penelitian sendiri. Aturan praktis adalah mengirimkan resource critical-path yang dikompresi/diminifikasi di bawah 170 KB.

Untuk demo sederhana ini, cobalah menjadi 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 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 bertindak sebagai titik masuk.

Nilai yang memungkinkan untuk hints adalah:

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

Pengoptimalan

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

Framework dan library membuat hidup developer lebih mudah, tetapi pengguna akhir tidak benar-benar peduli dengan cara membangun aplikasi, hanya karena aplikasi tersebut fungsional dan cepat. Jika Anda sudah melebihi anggaran performa, inilah saatnya untuk memikirkan kemungkinan pengoptimalan.

Di dunia nyata, framework sisi klien yang besar biasanya sulit untuk ditukar, sehingga penting untuk menggunakannya dengan bijak. Dengan sedikit riset, Anda dapat menemukan alternatif yang lebih kecil untuk library populer yang juga melakukan tugas tersebut (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 yang baik untuk mengoptimalkan aplikasi yang menyertakan library pihak ketiga yang besar. Panduan menghapus kode yang tidak digunakan menjelaskan proses ini secara mendetail dan berikut cara cepat untuk menulis ulang kode hitung mundur tanpa menggunakan momen.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 di konsol lagi untuk mem-build paket yang dioptimalkan.

Akhirnya! Anda telah memangkas 223 KiB (230KB) 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 (tidak sengaja) menambahkan dependensi besar. Pepatah ini "tidak terlihat, keluar dari pikiran" tetapi webpack dapat memastikan bahwa Anda selalu menyadari implikasi performa.