คำเตือนเกี่ยวกับงบประมาณเกินสูงสุดสำหรับการเริ่มต้น

เมื่อสร้างโครงการเชิงมุม 7 ของฉันด้วย --prod ฉันมีคำเตือนในเรื่องงบประมาณ

ฉันมีโครงการเชิงมุม 7 ฉันต้องการสร้างมัน แต่ฉันมีคำเตือน:

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

นี่คือรายละเอียดชิ้นส่วน:

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]

งบประมาณคืออะไรกันแน่? และฉันจะจัดการได้อย่างไร?

เปิดไฟล์angular.jsonและค้นหาbudgetsคำสำคัญ

ควรมีลักษณะดังนี้:

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

ตามที่คุณอาจเดาได้คุณสามารถเพิ่มmaximumWarningค่าเพื่อป้องกันคำเตือนนี้ได้เช่น:

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

อะไรงบประมาณหมายถึงอะไร?

งบประมาณประสิทธิภาพคือกลุ่มของขีด จำกัด ของค่าบางอย่างที่ส่งผลต่อประสิทธิภาพของไซต์ซึ่งอาจไม่เกินในการออกแบบและพัฒนาโครงการเว็บใด ๆ

ในกรณีของเรางบประมาณคือขีด จำกัด สำหรับขนาดกลุ่ม

ดูสิ่งนี้ด้วย:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• งบประมาณประสิทธิภาพ (ขอให้นับจำนวนน้อยและขนาดไฟล์เล็ก)

Angular CLI Budgets คืออะไร? งบประมาณเป็นหนึ่งในคุณสมบัติที่ไม่ค่อยมีใครรู้จักของ Angular CLI มันค่อนข้างเล็ก แต่เป็นคุณสมบัติที่เรียบร้อยมาก!

เมื่อแอปพลิเคชันมีฟังก์ชันการทำงานเพิ่มขึ้นก็มีขนาดใหญ่ขึ้น งบประมาณเป็นคุณลักษณะหนึ่งใน Angular CLI ซึ่งช่วยให้คุณสามารถกำหนดเกณฑ์งบประมาณในการกำหนดค่าของคุณเพื่อให้แน่ใจว่าส่วนต่างๆของแอปพลิเคชันของคุณอยู่ในขอบเขตที่คุณกำหนด - เอกสารอย่างเป็นทางการ

หรือกล่าวอีกนัยหนึ่งเราสามารถอธิบายแอปพลิเคชัน Angular ของเราเป็นชุดของไฟล์ JavaScript ที่คอมไพล์เรียกว่าบันเดิลซึ่งผลิตโดยกระบวนการสร้าง งบประมาณเชิงมุมช่วยให้เรากำหนดขนาดที่คาดหวังของกลุ่มเหล่านี้ได้ ยิ่งไปกว่านั้นเราสามารถกำหนดค่า thresholds สำหรับเงื่อนไขเมื่อเราต้องการรับคำเตือนหรือแม้แต่บิวด์ล้มเหลวโดยมีข้อผิดพลาดหากขนาดบันเดิลเกินการควบคุม!

วิธีการกำหนดงบประมาณ? งบประมาณเชิงมุมถูกกำหนดไว้ในไฟล์ angular.json มีการกำหนดงบประมาณต่อโครงการซึ่งเหมาะสมเนื่องจากทุกแอปในพื้นที่ทำงานมีความต้องการที่แตกต่างกัน

การคิดในทางปฏิบัติการกำหนดงบประมาณสำหรับการสร้างการผลิตนั้นสมเหตุสมผลเท่านั้น Prod build สร้างบันเดิลที่มี "ขนาดจริง" หลังจากใช้การเพิ่มประสิทธิภาพทั้งหมดเช่นการเขย่าต้นไม้และการย่อขนาดโค้ด

อ๊ะเกิดข้อผิดพลาดในการสร้าง! เกินขนาดกลุ่มสูงสุด นี่เป็นสัญญาณที่ดีที่บอกเราว่ามีบางอย่างผิดพลาด ...

1. เราอาจทดลองใช้คุณลักษณะของเราแล้วและไม่ได้ทำความสะอาดอย่างถูกต้อง
2. เครื่องมือของเราอาจผิดพลาดและนำเข้าอัตโนมัติที่ไม่ดีหรือเราเลือกสินค้าที่ไม่ถูกต้องจากรายการการนำเข้าที่แนะนำ
3. เราอาจนำเข้าข้อมูลจากโมดูลขี้เกียจในสถานที่ที่ไม่เหมาะสม
4. คุณลักษณะใหม่ของเรามีขนาดใหญ่มากและไม่เหมาะกับงบประมาณที่มีอยู่

แนวทางแรก: ไฟล์ของคุณถูกบีบอัดหรือไม่?

โดยทั่วไปแล้วไฟล์ gzipped มีขนาดประมาณ 20% ของไฟล์ต้นฉบับซึ่งสามารถลดเวลาในการโหลดครั้งแรกของแอปได้อย่างมาก หากต้องการตรวจสอบว่าคุณได้บีบอัดไฟล์ของคุณแล้วหรือไม่เพียงแค่เปิดแท็บเครือข่ายของคอนโซลนักพัฒนาซอฟต์แวร์ ใน "ส่วนหัวการตอบกลับ" หากคุณควรเห็น "การเข้ารหัสเนื้อหา: gzip" คุณก็ไปได้ดี

วิธี gzip หากคุณโฮสต์แอป Angular ของคุณในแพลตฟอร์มคลาวด์หรือ CDN ส่วนใหญ่คุณไม่ควรกังวลกับปัญหานี้เนื่องจากอาจจัดการให้คุณได้ อย่างไรก็ตามหากคุณมีเซิร์ฟเวอร์ของคุณเอง (เช่น NodeJS + expressJS) ที่ให้บริการแอพ Angular ของคุณให้ตรวจสอบว่าไฟล์ถูก gzipped หรือไม่ ต่อไปนี้เป็นตัวอย่างในการ gzip เนื้อหาคงที่ของคุณในแอป NodeJS + expressJS คุณแทบไม่สามารถจินตนาการได้เลยว่ามิดเดิลแวร์ที่เรียบง่าย "การบีบอัด" นี้จะลดขนาดบันเดิลของคุณจาก 2.21MB เป็น 495.13KB

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

แนวทางที่สอง :: วิเคราะห์กลุ่มเชิงมุมของคุณ

หากขนาดกลุ่มของคุณใหญ่เกินไปคุณอาจต้องการวิเคราะห์ชุดข้อมูลของคุณเนื่องจากคุณอาจใช้แพ็กเกจของบุคคลที่สามขนาดใหญ่ที่ไม่เหมาะสมหรือคุณลืมลบบางแพ็กเกจหากคุณไม่ได้ใช้งานอีกต่อไป Webpack มีคุณสมบัติที่น่าทึ่งเพื่อให้เราเห็นภาพขององค์ประกอบของชุดรวมของ Webpack

ง่ายมากที่จะได้กราฟนี้

1. npm install -g webpack-bundle-analyzer
2. ในแอป Angular ของคุณให้เรียกใช้ng build --stats-json(อย่าใช้แฟล็ก--prod) เมื่อเปิดใช้งาน--stats-jsonคุณจะได้รับไฟล์ stats.json เพิ่มเติม
3. สุดท้ายเรียกใช้webpack-bundle-analyzer ./dist/stats.jsonและเบราว์เซอร์ของคุณจะปรากฏขึ้นที่ localhost: 8888 ขอให้สนุกกับมัน

ref 1: Angular CLI Budgets ช่วยวันของฉันได้อย่างไรและพวกเขาจะช่วยคุณได้อย่างไร

ref 2: ปรับขนาดกลุ่ม Angular ให้เหมาะสมใน 4 ขั้นตอน