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.
npm install -g webpack-bundle-analyzer
- Di aplikasi Angular Anda, jalankan
ng build --stats-json
. Ini akan membuat temuan tambahanstats.json
di folder./dist
Anda. - Terakhir, jalankan
webpack-bundle-analyzer ./dist/stats.json
dan browser Anda akan memunculkan halaman dilocalhost: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.
- 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.
- Instal
imageoptim-cli
.
npm install -g imageoptim-cli
- or -brew update brew install imageoptim-cli
2. Tambahkan skrip ke package.json
untuk 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.
- ImageOptim: https://imageoptim.com
- GambarAlpha: https://pngmini.com
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.