Optimasi Ukuran Bundel Sudut

Ringkasan

Sangat menyakitkan mendengar dari pelanggan Anda yang berharga bahwa, aplikasi web Anda membutuhkan waktu terlalu lama untuk dimuat dan sangat lambat. Ada ratusan dan ribuan artikel tersedia yang membahas tentang peningkatan kinerja aplikasi seperti pemuatan lambat, rendering sisi server, caching.

Pembahasan hari ini adalah tentang cara memperkecil ukuran bundel Angular dengan cara yang sangat mudah.

Seberapa besar paket Anda saat ini?

Dengan menjalankan ng build --prod, Anda dapat mengetahui ukuran paket Anda saat ini. Izinkan saya membangun salah satu proyek Angular dengan 100+ modul di dalamnya. (Percayalah, saya tidak menghitung modul Perutean).

Build ini mencakup 142 potongan dan file yang jauh lebih besar seperti di bawah ini.

  • utama.*.js : 3,3MB
  • polyfills.*.js : 1,5 MB
  • gaya.*.js : 1,5MB
  • skrip.*.js : 1,1MB
  • runtime.*.js (Dalam beberapa proyek berdasarkan cara Anda menyusun modul)

Biasanya, di antara file-file besar itu, main.*.js kemungkinan besar akan menjadi besar dan gila. Anda dapat menghabiskan waktu berminggu-minggu dan berbulan-bulan untuk beberapa kali pengulangan perubahan kode dan proses restrukturisasi, tetapi ini akan sangat menyakitkan. Namun sulit untuk menyangkal bahwa waktu pemuatan halaman awal sangat erat kaitannya dengan ukuran paket aplikasi Angular Anda.

Penganalisis Paket

webpack-bundle-analyzer dapat membuat visualisasi peta pohon interaktif dari konten semua bundel Anda.

Cukup ikuti langkah-langkah di bawah ini untuk menghasilkan visualisasi untuk paket Anda.

  1. npm install -g webpack-bundle-analyzer
  2. Di aplikasi Angular Anda, jalankan ng build --stats-json. Ini akan membuat temuan tambahan stats.json di folder ./dist Anda.
  3. Terakhir, jalankan webpack-bundle-analyzer ./dist/stats.json dan browser Anda akan memunculkan halaman di localhost:8888.

gzipper

gzipper adalah paket NPM yang menyediakan CLI untuk mengompresi file menggunakan algoritma kompres populer seperti Brotli dan Gzip. Modul ini juga berfungsi baik dengan banyak alat CLI UI (Angular CLI, Vue CLI, create-react-app) dan mendukung beberapa tanda opsi untuk setiap algoritma.

  1. Instal ritsleting sebagai Ketergantungan Pengembang pada proyek Anda.
npm i -D gzipper

atau ini dapat diinstal secara global.

npm i -g gzipper

2. Bangun proyek Anda dengan flag --prod, --aot, dan --build-optimizer. Jika Anda belum terbiasa dengan --build-optimizer, ini mengaktifkan pengoptimalan '@angular-devkit/build-optimizer' saat menggunakan opsi 'aot'.

ng build --prod --aot --build-optimizer

Sekarang Anda akan memiliki ./dist dengan App Bundle.

3. Untuk mengompresi App Bundle, jalankan perintah di bawah ini.

gzipper --verbose ./dist

Saat Anda memeriksa folder ./dist sekarang, Anda dapat mengamati bahwa file gzip baru dibuat untuk setiap file di folder ./dist. Ukuran file lebih lanjut dari versi file terkompresi sangat kecil. Sesuai tangkapan layar di bawah, ukuran file main.*.js berkurang 78% di main.*.js.gz.

  • utama.*.js.gz : 735KB
  • polyfills.*.js.gz : 446KB
  • gaya.*.js.gz : 322KB
  • skrip.*.js.gz : 288KB

gzipper dapat dibatasi pada ekstensi file tertentu dengan tanda --include.

gzipper --verbose --include js,html,scss,css,svg,json ./dist

4. Untuk penggunaan jangka panjang perbarui package.json Anda dengan skrip baru seperti di bawah ini.

"scripts": {
   "build:prod": "ng build --prod --aot --build-optimizer && gzipper --verbose ./dist"
},

Gunakan perintah berikut untuk membangun produksi.

npm run build:prod

Penerapan ke NGINX

Sekarang Anda memiliki ratusan file App Bundle asli dan file gzip di folder ./dist yang sama.

Untuk menerapkan app bundle ke NGINX Anda perlu membuat sedikit perubahan pada filenginx.conf yang ada. Anda memerlukan modul HttpGzipStatic untuk ini. Masukkan gzip_static on; di konfigurasi Anda.

Anda harus menyimpan file zip dan file aslinya, Anda kemudian dapat meminta, misalnya, /css.css dan disajikan file zip /css.css.gz

server {
  listen 80;
  charset utf-8;
  sendfile on;
  root /usr/share/nginx/html;
  gzip_static on;
  location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
    expires 7d;
  }
   
  location / {
    expires 12h;
    try_files $uri $uri/ /index.html = 404;
  }
}

Anda dapat mengubah konfigurasi location, expires berdasarkan kebutuhan Anda.

Jika Anda lebih suka penerapan Docker, Dockerfile akan terlihat seperti di bawah ini.

FROM nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html
COPY dist/ /usr/share/nginx/html

Jika semua konfigurasi berhasil dilakukan, header respons content-encoding: gzip dapat diamati untuk file terkompresi di alat pengembang browser.

Optimasi Gambar

imageoptim adalah plugin NPM hebat yang dapat digunakan untuk mengoptimalkan semua gambar di Proyek Angular Anda.

  1. Instal imageoptim-cli.
npm install -g imageoptim-cli
- or -
brew update
brew install imageoptim-cli

2. Tambahkan skrip ke package.jsonuntuk memanggil imageoptim. Ubah perintah agar sesuai dengan folder gambar Anda.

"scripts": {
  "imageoptim": "imageoptim --imagealpha 'src/assets/**/*.png'"
 },

3. Install aplikasi ImageOptim dan ImageAlpha ke laptop anda.

4. Jalankan skrip npm untuk mengoptimalkan semua file gambar.

npm run imageoptim

ImageOptim akan mengambil gambar secara berkelompok dan mengoptimalkannya. Proses ini akan memakan waktu sedikit berdasarkan jumlah dan ukuran gambar.

Silakan kunjungi dokumentasi ImageOptim untuk lebih jelasnya.

Semoga Anda menikmati artikel ini dan mempelajari sesuatu yang baru. Tetap berlangganan untuk artikel saya berikutnya.