Saat membangun proyek angular 7 saya dengan --prod, saya memiliki peringatan di anggaran.
Saya memiliki proyek angular 7, saya ingin membangunnya, tetapi saya mendapat peringatan:
WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB
ini adalah detail potongan:
chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]
apa sebenarnya anggaran itu? dan bagaimana cara mengelolanya?
angular
build
production
ng-build
Masoud Bimar
sumber
sumber
Jawaban:
Buka file angular.json dan temukan
budgets
kata kunci.Ini akan terlihat seperti:
Seperti yang mungkin Anda duga, Anda dapat meningkatkan
maximumWarning
nilai untuk mencegah peringatan ini, yaitu:Apa artinya anggaran ?
Dalam kasus kami, anggaran adalah batas untuk ukuran paket.
Lihat juga:
sumber
@angular/cli@7
Lihat juga yang baru di ng7 di sini blog.angular.io/…With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
Apa itu Anggaran CLI Angular? Anggaran adalah salah satu fitur CLI Angular yang kurang dikenal. Ini agak kecil tapi fitur yang sangat rapi!
Saat aplikasi tumbuh dalam fungsionalitas, mereka juga tumbuh dalam ukuran. Anggaran adalah fitur di CLI Angular yang memungkinkan Anda untuk menetapkan ambang anggaran dalam konfigurasi Anda untuk memastikan bagian dari aplikasi Anda tetap dalam batas yang Anda tetapkan - Dokumentasi Resmi
Atau dengan kata lain, kita dapat mendeskripsikan aplikasi Angular kita sebagai sekumpulan file JavaScript yang dikompilasi yang disebut bundel yang dihasilkan oleh proses build. Anggaran sudut memungkinkan kami mengonfigurasi ukuran yang diharapkan dari paket ini. Lebih dari itu, kita dapat mengonfigurasi ambang batas untuk kondisi ketika kita ingin menerima peringatan atau bahkan gagal membangun dengan kesalahan jika ukuran bundel terlalu di luar kendali!
Bagaimana Menentukan Anggaran? Anggaran sudut ditentukan dalam file angular.json. Anggaran ditentukan per proyek yang masuk akal karena setiap aplikasi di ruang kerja memiliki kebutuhan yang berbeda.
Berpikir secara pragmatis, masuk akal untuk menentukan anggaran untuk build produksi. Prod build membuat paket dengan "ukuran sebenarnya" setelah menerapkan semua pengoptimalan seperti pengocokan pohon dan minimisasi kode.
Ups, kesalahan versi! Ukuran paket maksimum telah terlampaui. Ini adalah sinyal bagus yang memberi tahu kami bahwa ada yang tidak beres…
Pendekatan Pertama: Apakah file Anda di-gzip?
Secara umum, file gzip hanya berukuran sekitar 20% dari ukuran file aslinya, yang secara drastis dapat menurunkan waktu muat awal aplikasi Anda. Untuk memeriksa apakah Anda telah meng-gzip file Anda, cukup buka tab jaringan konsol pengembang. Di "Header Respons", jika Anda melihat "Pengodean Konten: gzip", Anda dapat melakukannya.
Bagaimana cara melakukan gzip? Jika Anda menghosting aplikasi Angular Anda di sebagian besar platform cloud atau CDN, Anda tidak perlu khawatir tentang masalah ini karena mereka mungkin telah menangani ini untuk Anda. Namun, jika Anda memiliki server sendiri (seperti NodeJS + expressJS) yang melayani aplikasi Angular Anda, pastikan untuk memeriksa apakah file di-gzip. Berikut ini adalah contoh untuk meng-gzip aset statis Anda di aplikasi NodeJS + expressJS. Anda tidak dapat membayangkan “kompresi” middleware sederhana yang mati ini akan mengurangi ukuran bundel Anda dari 2,21MB menjadi 495,13KB.
Pendekatan Kedua :: Analisis bundel Angular Anda
Jika ukuran bundel Anda menjadi terlalu besar, Anda mungkin ingin menganalisis bundel Anda karena Anda mungkin telah menggunakan paket pihak ketiga berukuran besar yang tidak sesuai atau Anda lupa menghapus beberapa paket jika Anda tidak menggunakannya lagi. Webpack memiliki fitur luar biasa untuk memberi kita gambaran visual tentang komposisi bundel webpack.
Sangat mudah untuk mendapatkan grafik ini.
npm install -g webpack-bundle-analyzer
ng build --stats-json
(jangan gunakan bendera--prod
). Dengan mengaktifkan--stats-json
Anda akan mendapatkan stats.json file tambahanwebpack-bundle-analyzer ./dist/stats.json
dan browser Anda akan memunculkan halaman di localhost: 8888. Bersenang-senanglah dengannya.ref 1: Bagaimana Anggaran CLI Angular Menyelamatkan Hari Saya Dan Bagaimana Mereka Dapat Menyelamatkan Hari Anda
ref 2: Optimalkan ukuran bundel Angular dalam 4 langkah
sumber
npx webpack-bundle-analyzer ./dist/stats.json
ng build --statsJson=true
. Lihat Angular 9 Doc