Bütçelerde UYARI, başlangıç ​​için maksimum aşıldı

Açısal 7 projemi --prod ile oluştururken, bütçelerde bir uyarı alıyorum.

Açısal 7 projem var, inşa etmek istiyorum ama bir uyarım var:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

bunlar yığın ayrıntılardır:

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]

bütçeler tam olarak nedir? ve bunları nasıl yönetmeliyim?

Angular.json dosyasını açın ve budgetsanahtar kelimeyi bulun .

Şöyle görünmeli:

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

Muhtemelen tahmin ettiğiniz gibi, maximumWarningbu uyarıyı önlemek için değeri artırabilirsiniz , yani:

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

Bütçeler ne anlama geliyor?

Performans bütçesi, site performansını etkileyen ve herhangi bir web projesinin tasarımında ve geliştirilmesinde aşılamayacak belirli değerlere yönelik bir grup sınırdır.

Bizim durumumuzda bütçe, paket boyutları için sınırdır.

Ayrıca bakınız:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Performans Bütçeleri (İstek Sayısını Düşük ve Dosya Boyutlarını Küçük Tutun)

Açısal CLI Bütçeleri nedir? Bütçeler, Angular CLI'nin daha az bilinen özelliklerinden biridir. Oldukça küçük ama çok güzel bir özellik!

Uygulamalar işlevsellik açısından büyüdükçe boyutları da büyür. Bütçeler, uygulamanızın bölümlerinin belirlediğiniz sınırlar içinde kalmasını sağlamak için yapılandırmanızda bütçe eşikleri belirlemenize izin veren bir Angular CLI özelliğidir - Resmi Belgeler

Ya da başka bir deyişle, Angular uygulamamızı, derleme süreci tarafından üretilen paketler adı verilen bir dizi derlenmiş JavaScript dosyası olarak tanımlayabiliriz. Açısal bütçeler, bu paketlerin beklenen boyutlarını yapılandırmamıza olanak tanır. Dahası, bir uyarı almak istediğimizde veya paket boyutu çok fazla kontrolden çıkarsa bir hatayla derlemede başarısız olduğumuz durumlar için eşikler yapılandırabiliriz!

Bütçe Nasıl Tanımlanır? Açısal bütçeler angular.json dosyasında tanımlanır. Bütçeler proje başına tanımlanır, bu da mantıklıdır çünkü bir çalışma alanındaki her uygulamanın farklı ihtiyaçları vardır.

Pragmatik düşünürsek, yalnızca üretim yapıları için bütçe tanımlamak mantıklıdır. Ürün derlemesi, ağaç sallama ve kod minimizasyonu gibi tüm optimizasyonları uyguladıktan sonra "gerçek boyutlu" paketler oluşturur.

Oops, bir yapı hatası! Maksimum paket boyutu aşıldı. Bu, bize bir şeylerin ters gittiğini söyleyen harika bir sinyaldir ...

1. Özelliğimizi denemiş ve düzgün temizlememiş olabiliriz
2. Araçlarımız yanlış gidebilir ve kötü bir otomatik içe aktarma gerçekleştirebilir veya önerilen ithalat listesinden kötü bir öğe seçeriz
3. Uygun olmayan konumlardaki tembel modüllerden içeri aktarabiliriz
4. Yeni özelliğimiz gerçekten büyük ve mevcut bütçelere uymuyor

İlk Yaklaşım: Dosyalarınız gzip'lenmiş mi?

Genel olarak, gzip ile sıkıştırılmış dosya, orijinal dosyanın boyutunun yalnızca yaklaşık% 20'sine sahiptir ve bu, uygulamanızın ilk yükleme süresini önemli ölçüde azaltabilir. Dosyalarınızı gzip'lemiş olup olmadığınızı kontrol etmek için, geliştirici konsolunun ağ sekmesini açmanız yeterlidir. "Yanıt Başlıkları" nda, "Content-Encoding: gzip" i görürseniz, gitmekte fayda var.

Gzip nasıl yapılır? Angular uygulamanızı çoğu bulut platformunda veya CDN'de barındırıyorsanız, muhtemelen bunu sizin için hallettikleri için bu sorun hakkında endişelenmemelisiniz. Bununla birlikte, Angular uygulamanıza hizmet veren kendi sunucunuz (NodeJS + expressJS gibi) varsa, dosyaların gzipli olup olmadığını kesinlikle kontrol edin. Aşağıda, bir NodeJS + expressJS uygulamasında statik varlıklarınızı gzip ile sıkıştırmak için bir örnek verilmiştir. Bu ölü basit ara yazılım "sıkıştırmasının" paket boyutunuzu 2.21MB'den 495.13KB'ye düşüreceğini tahmin edemezsiniz.

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

İkinci Yaklaşım :: Açısal paketinizi analiz edin

Paket boyutunuz çok büyürse, paketinizi analiz etmek isteyebilirsiniz çünkü uygun olmayan büyük boyutlu bir üçüncü taraf paketi kullanmış olabilirsiniz veya artık kullanmıyorsanız bazı paketleri kaldırmayı unutmuş olabilirsiniz. Webpack, bize bir web paketi paketinin bileşimi hakkında görsel bir fikir vermek için harika bir özelliğe sahiptir.

Bu grafiği elde etmek çok kolay.

1. npm install -g webpack-bundle-analyzer
2. Angular uygulamanızda çalıştırın ng build --stats-json(bayrak kullanmayın --prod). Etkinleştirdiğinizde --stats-json, ek bir dosya stats.json alacaksınız
3. Son olarak, çalıştırın webpack-bundle-analyzer ./dist/stats.jsonve tarayıcınız localhost: 8888'deki sayfayı açacaktır. Onunla iyi eğlenceler.

ref 1: Angular CLI Bütçeleri Günümü Nasıl Kurtardı ve Sizinkini Nasıl Kurtarabilirler?

ref 2: Açısal paket boyutunu 4 adımda optimize edin