PERINGATAN dalam anggaran, maksimum terlampaui untuk awal

155

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?

Masoud Bimar
sumber
4
Coba kompres gambar Anda dalam aset alih-alih mengedit file angular.json
Ahsan
@Ahsan itulah yang saya lakukan. Masih pesan yang sama. Tidak yakin ini tentang aset.
Emerica
@Curse Wee jawaban baru saya dan periksa
tautannya

Jawaban:

252

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:

yurzui
sumber
2
Bisakah Anda menjelaskan apa artinya anggaran?
Stack Overflow
3
@StackOverflow Ditambahkan
yurzui
2
Terima kasih @yurzui atas jawaban cepat Anda, Apakah ini fitur baru di angular 7? Kami tidak melihat kesalahan ini di sudut 5. Apakah itu berarti kami melakukan sesuatu yang salah?
Stack Overflow
2
@StackOverflow Telah ditambahkan di @angular/cli@7Lihat 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.
yurzui
23
bagaimana cara mengoptimalkan untuk mengurangi ukuran anggaran bekas? bukannya meningkatkannya ...
deadManN
76

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.

masukkan deskripsi gambar di sini

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

Masoud Bimar
sumber
Di mana Anda meletakkan kode 'kompresi' yang Anda berikan di aplikasi sudut Anda?
F3L1X79
1
Jika Anda menggunakan qzip dalam proyek nodejs, lihat tautan ini , untuk proyek bersudut Anda cukup mengaktifkannya pada perintah build, lihat tautan
Masoud Bimar
2
Untuk menjalankan penganalisis tanpa menginstal paket secara global:npx webpack-bundle-analyzer ./dist/stats.json
michel404
4
Di Angular 9 perintahnya adalah ng build --statsJson=true. Lihat Angular 9 Doc
wami