CẢNH BÁO trong ngân sách, vượt quá tối đa cho ban đầu

Khi xây dựng dự án 7 góc của tôi với --prod, tôi có một cảnh báo trong ngân sách.

Tôi có một dự án 7 góc, tôi muốn xây dựng nó, nhưng tôi có một cảnh báo:

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

đây là chi tiết chunk:

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]

chính xác ngân sách là gì? và tôi nên quản lý chúng như thế nào?

Mở tệp angular.json và tìm budgetstừ khóa.

Nó sẽ trông giống như:

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

Như bạn có thể đoán, bạn có thể tăng maximumWarninggiá trị để ngăn cảnh báo này, tức là:

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

Không gì ngân sách nghĩa là gì?

Ngân sách hiệu suất là một nhóm các giới hạn đối với các giá trị nhất định ảnh hưởng đến hiệu suất trang web, có thể không vượt quá trong thiết kế và phát triển của bất kỳ dự án web nào.

Trong trường hợp ngân sách của chúng tôi là giới hạn cho kích thước gói.

Xem thêm:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Ngân sách hiệu suất (Giữ số lượng yêu cầu thấp và kích thước tệp nhỏ)

Ngân sách CLI góc là gì? Ngân sách là một trong những tính năng ít được biết đến của Angular CLI. Đó là một tính năng khá nhỏ nhưng rất gọn gàng!

Khi các ứng dụng phát triển về chức năng, chúng cũng tăng kích thước. Ngân sách là một tính năng trong CLI góc, cho phép bạn đặt ngưỡng ngân sách trong cấu hình của mình để đảm bảo các phần trong ứng dụng của bạn nằm trong ranh giới bạn đặt - Tài liệu chính thức

Hay nói cách khác, chúng ta có thể mô tả ứng dụng Angular của mình như một tập hợp các tệp JavaScript được biên dịch được gọi là các gói được tạo bởi quá trình xây dựng. Ngân sách góc cho phép chúng tôi định cấu hình kích thước dự kiến ​​của các gói này. Hơn nữa, chúng ta có thể định cấu hình ngưỡng cho các điều kiện khi chúng ta muốn nhận cảnh báo hoặc thậm chí không xây dựng được lỗi nếu kích thước gói vượt quá tầm kiểm soát!

Làm thế nào để xác định ngân sách? Ngân sách góc được xác định trong tệp angular.json. Ngân sách được xác định cho mỗi dự án có ý nghĩa bởi vì mỗi ứng dụng trong không gian làm việc có nhu cầu khác nhau.

Suy nghĩ thực tế, nó chỉ có ý nghĩa để xác định ngân sách cho các bản dựng sản xuất. Bản dựng Prod tạo ra các gói với kích thước thật đúng kích thước sau khi áp dụng tất cả các tối ưu hóa như rung cây và giảm thiểu mã.

Rất tiếc, một lỗi xây dựng! Kích thước bó tối đa đã vượt quá. Đây là một tín hiệu tuyệt vời cho chúng ta biết rằng đã xảy ra sự cố

1. Chúng tôi có thể đã thử nghiệm tính năng của mình và không dọn dẹp đúng cách
2. Công cụ của chúng tôi có thể sai và thực hiện nhập tự động xấu hoặc chúng tôi chọn mục xấu từ danh sách nhập khẩu được đề xuất
3. Chúng tôi có thể nhập nội dung từ các mô-đun lười biếng ở các vị trí không phù hợp
4. Tính năng mới của chúng tôi thực sự lớn và không phù hợp với ngân sách hiện có

Cách tiếp cận đầu tiên: Các tập tin của bạn có được nén không?

Nói chung, tệp được nén chỉ có khoảng 20% ​​kích thước của tệp gốc, điều này có thể làm giảm đáng kể thời gian tải ban đầu của ứng dụng của bạn. Để kiểm tra xem bạn đã nén các tệp của mình chưa, chỉ cần mở tab mạng của bảng điều khiển dành cho nhà phát triển. Trong phần Tiêu đề phản hồi của người dùng, nếu bạn thấy Mã hóa nội dung: gzip, bạn nên đi.

Làm thế nào để gzip? Nếu bạn lưu trữ ứng dụng Angular của bạn trong hầu hết các nền tảng đám mây hoặc CDN, bạn không nên lo lắng về vấn đề này vì có lẽ họ đã xử lý việc này cho bạn. Tuy nhiên, nếu bạn có máy chủ của riêng bạn (chẳng hạn như NodeJS + expressJS) phục vụ ứng dụng Angular của bạn, chắc chắn kiểm tra xem các tệp có được nén không. Sau đây là một ví dụ để gzip tài sản tĩnh của bạn trong ứng dụng NodeJS + expressJS. Bạn khó có thể tưởng tượng phần mềm trung gian chết đơn giản này nén nén sẽ giảm kích thước gói của bạn từ 2,21MB xuống 495,13KB.

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

Cách tiếp cận thứ hai :: Phân tích gói góc của bạn

Nếu kích thước gói của bạn quá lớn, bạn có thể muốn phân tích gói của mình vì bạn có thể đã sử dụng gói bên thứ ba có kích thước lớn không phù hợp hoặc bạn quên xóa một số gói nếu bạn không sử dụng gói đó nữa. Webpack có một tính năng tuyệt vời để cung cấp cho chúng tôi ý tưởng trực quan về thành phần của gói webpack.

Rất dễ dàng để có được biểu đồ này.

1. npm install -g webpack-bundle-analyzer
2. Trong ứng dụng Angular của bạn, hãy chạy ng build --stats-json(không sử dụng cờ --prod). Bằng cách cho phép, --stats-jsonbạn sẽ nhận được một tệp stats.json bổ sung
3. Cuối cùng, chạy webpack-bundle-analyzer ./dist/stats.jsonvà trình duyệt của bạn sẽ bật lên trang tại localhost: 8888. Hãy vui vẻ với nó.

ref 1: Ngân sách CLI góc cạnh đã cứu tôi như thế nào và làm thế nào họ có thể cứu bạn

ref 2: Tối ưu hóa kích thước bó góc trong 4 bước