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. Penggabungan itu rapi, tetapi seiring berkembangnya aplikasi, app bundle juga akan berkembang. Anda perlu memantau ukuran paket untuk memastikan ukurannya tidak terlalu besar dan memengaruhi waktu yang diperlukan aplikasi 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 hari tersisa hingga Tahun Baru. Aplikasi ini dibuat dengan React dan moment.js. (Sama seperti aplikasi di dunia nyata yang semakin mengandalkan 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 to Edit untuk menjadikan project dapat diedit.
  2. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).
  3. Untuk mendapatkan daftar aset dan ukurannya yang diberi kode warna, 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 nilai minimum default-nya adalah 244 KiB yang tidak dikompresi, baik untuk aset maupun 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 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 project Anda. Sebaiknya lakukan riset sendiri. Aturan praktis yang baik adalah mengirimkan resource jalur kritis yang dikompresi/diminifikasi kurang dari 170 KB.

Untuk demo sederhana ini, coba 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 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 berwarna merah, tetapi build masih 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 menjadi terlalu sulit untuk diperbaiki. Selalu ada lebih dari satu cara untuk mem-build aplikasi dan beberapa teknik akan membuat waktu pemuatan lebih cepat. (Banyak di antaranya didokumentasikan di sini di Mengoptimalkan JavaScript. 🤓)

Framework dan library mempermudah pekerjaan developer, tetapi pengguna akhir tidak begitu memedulikan cara aplikasi dibuat, hanya memastikan bahwa aplikasi tersebut berfungsi dan cepat. Jika Anda melampaui anggaran performa, saatnya untuk 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 menemukan alternatif yang lebih kecil untuk library populer yang melakukan tugas dengan baik (date-fns adalah alternatif yang baik untuk moment.js). Terkadang lebih baik 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 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');

Anda memerlukan sedikit matematika, tetapi Anda dapat menerapkan hitung 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 mem-build paket yang dioptimalkan.

Akhirnya! Anda telah memangkas 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 (tidak sengaja) menambahkan dependensi besar. Ada pepatah "out of sight, out of mind", tetapi webpack dapat memastikan bahwa Anda selalu mengetahui implikasi performa.