PERINGATAN dalam anggaran, maksimum terlampaui untuk awal

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?

Buka file angular.json dan temukan budgetskata kunci.

Ini akan terlihat seperti:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

Seperti yang mungkin Anda duga, Anda dapat meningkatkan maximumWarningnilai untuk mencegah peringatan ini, yaitu:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

Apa artinya anggaran ?

Anggaran kinerja adalah sekelompok batas untuk nilai-nilai tertentu yang mempengaruhi kinerja situs, yang tidak boleh dilampaui dalam desain dan pengembangan proyek web apa pun.

Dalam kasus kami, anggaran adalah batas untuk ukuran paket.

Lihat juga:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Anggaran Kinerja (Pertahankan Jumlah Permintaan Rendah dan Ukuran File Kecil)

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…

1. Kami mungkin telah bereksperimen dalam fitur kami dan tidak membersihkan dengan benar
2. Perkakas kami bisa salah dan melakukan impor otomatis yang buruk, atau kami memilih item yang buruk dari daftar impor yang disarankan
3. Kami mungkin mengimpor barang dari modul malas di lokasi yang tidak tepat
4. Fitur baru kami sangat besar dan tidak sesuai dengan anggaran yang ada

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.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

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.

1. npm install -g webpack-bundle-analyzer
2. Di aplikasi Angular Anda, jalankan ng build --stats-json(jangan gunakan bendera --prod). Dengan mengaktifkan --stats-jsonAnda akan mendapatkan stats.json file tambahan
3. Terakhir, jalankan webpack-bundle-analyzer ./dist/stats.jsondan 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