เขียนด้านหน้า
เมื่อเร็ว ๆ นี้ฉันเจอการโหลดเนื้อหาบางอย่างในบรรจุภัณฑ์แบบโมดูลาร์เชิงมุมในที่ทำงาน ฉันรู้สึกว่าฉันมีข้อผิดพลาดอยู่ตรงกลางดังนั้นฉันจึงทำเครื่องหมายไว้ที่นี่
พื้นหลังโครงการ:
โครงการส่วนใหญ่ใช้ AngularJS เป็นกรอบส่วนหน้า เมื่อโครงการได้รับการปล่อยตัวก่อนหน้านี้สคริปต์ส่วนหน้าทั้งหมดจะถูกบรรจุและบีบอัดลงในไฟล์ มันจะถูกโหลดเมื่อเข้าถึงหน้าแรกส่งผลให้การโหลดเริ่มต้นช้าของหน้า บนพื้นฐานนี้มีการเสนอให้โหลดตามความต้องการนั่นคือสคริปต์ของโมดูลจะถูกโหลดเฉพาะเมื่อผู้ใช้เข้าถึงโมดูลที่แน่นอน
เครื่องมือ:
โครงการใช้บรรจุภัณฑ์คำรามตามข้อกำหนดของ AMD ใช้คำตอบที่น่ากลัวในการบีบอัดและผสานโมดูลและใช้ oclazyload เพื่อให้การโหลดแบบขี้เกียจของโมดูลเชิงมุม
กระบวนการโครงการ:
บรรจุภัณฑ์โมดูล
รหัสในโครงการนั้นถูกเขียนขึ้นตามข้อกำหนดของ AMD และคำตอบที่น่ากลัว-Contrib-requireJS ใช้เพื่อบีบอัดแต่ละโมดูลลงในไฟล์ JS
คำถามที่ 1: ในรหัสโครงการแต่ละโมดูลจะพึ่งพาห้องสมุดบุคคลที่สาม/บริการสาธารณะในโครงการ/คำแนะนำสาธารณะในโครงการ หากส่วนนี้ของเนื้อหาไม่ได้รับการประมวลผลคำกรช-contrib-requireJS จะโหลดโมดูลทั้งหมดขึ้นอยู่กับเมื่อบีบอัดแต่ละโมดูลแล้วบีบอัดลงในไฟล์ JS เดียวกัน
การตอบสนอง: บีบอัดไลบรารี/บริการสาธารณะของบุคคลที่สามและคำแนะนำเป็นสามโมดูลแล้วลบออกโดยใช้ "ยกเว้น" จากสคริปต์บรรจุภัณฑ์ของแต่ละโมดูล ดังที่แสดงในรูปด้านล่าง:
ควรสังเกตว่าชื่อโมดูลของโมดูลสาธารณะจำเป็นต้องมีไฟล์ JS ที่มีชื่อเดียวกันภายใต้เส้นทางที่สอดคล้องกัน
โหลดตามความต้องการ
หลังจากบรรจุสคริปต์ลงในไฟล์ JS โดยโมดูลขั้นตอนต่อไปคือการโหลดโมดูลที่แตกต่างกันตามคำขอของผู้ใช้ โครงการใช้ UI-Router เพื่อจัดการกับการข้ามเส้นทาง คุณสามารถเริ่มต้นจากเส้นทางเพื่อเติมเต็มการโหลดโมดูลที่ขี้เกียจ
วิธีการเฉพาะคือ: เมื่อผู้ใช้ดำเนินการกระโดดเส้นทางโมดูลที่ผู้ใช้จะถูกโหลดตามสถานะที่ผู้ใช้ต้องการข้ามไป ขึ้นอยู่กับสิ่งนี้การแมประหว่างรัฐและโมดูลจะต้องเพิ่ม ในตอนแรกมีความจำเป็นต้องโหลดด้วย requirejs พบว่าสคริปต์สามารถโหลดได้ แต่ตัวควบคุม/บริการ/ตัวกรองที่ลงทะเบียนใน Angular ไม่ทำงาน การสอบสวนพบว่าบริการเช่นตัวควบคุมที่ลงทะเบียนโดย Angular หลังจากเรียกใช้วิธี bootstrap จะไม่ถูกเรียกอีกครั้ง จากสิ่งนี้ Oclazyload ได้รับการแนะนำให้รู้จักกับการโหลด (Oclazyload มีการฉีดและการดัดแปลงซอร์สโค้ดเชิงมุม)
จนถึงขณะนี้การโหลดตามความต้องการได้ถูกนำไปใช้โดยทั่วไป แต่ก็ยังมีปัญหาหลายประการ:
การพึ่งพาโครงการระหว่างโมดูล
เนื่องจากมีการพึ่งพาที่แข็งแกร่งระหว่างโครงการระหว่างบางโมดูลการประมวลผลคือการเพิ่มการพึ่งพาระหว่างโมดูลในไฟล์การกำหนดค่า ก่อนที่จะโหลดโมดูลให้ตรวจสอบว่ามีโมดูลขึ้นอยู่กับหรือไม่ ถ้าเป็นเช่นนั้นโมดูลที่ขึ้นอยู่กับจะถูกโหลดก่อน หลังจากโหลดโมดูลขึ้นอยู่กับโมดูลปัจจุบันจะโหลด
การโหลดคำแนะนำขี้เกียจ;
ใน Angular, $ compile สามารถใช้เพื่อใช้การพึ่งพาซึ่งกันและกันระหว่างคำแนะนำ การประมวลผลของสิ่งนี้คือการกำหนดค่าชื่อคำสั่งและการพึ่งพาของโมดูลคำสั่ง เมื่อมีการใช้คำสั่งบางอย่างโมดูลจะถูกโหลดก่อนจากนั้นวิธีการรวบรวมจะถูกดำเนินการ โซลูชันนี้สามารถแก้ปัญหาการพึ่งพาคำสั่งส่วนใหญ่ได้
ตำแหน่งของคำแนะนำ โครงการส่วนใหญ่ใช้หน้ายาวแต่ละหน้ายาวแบ่งออกเป็นหลายพื้นที่และแต่ละพื้นที่เป็นคำสั่ง จะมีปัญหาเมื่อใช้การสกัดกั้นนั่นคือเวลาในการโหลดของแต่ละคำสั่งแตกต่างกัน คำสั่งที่กลับมาก่อนจะถูกผนวกเข้ากับ DOM ก่อนส่งผลให้เกิดความไม่แน่นอนในเค้าโครงหน้า วิธีแก้ปัญหาคือการใช้กลไก Deffer และหลังจากคำแนะนำทั้งหมดได้รับการโหลด/รวบรวมเพิ่มการดำเนินการกับแผนผัง DOM
การพึ่งพาระหว่างคำสั่ง: นอกจากนี้ยังมีการพึ่งพาโครงการระหว่างคำสั่ง วิธีแก้ปัญหานี้คือการรวมคำแนะนำที่พึ่งพาซึ่งกันและกันเข้ากับโมดูลและจัดทำพัสดุลงในไฟล์สคริปต์เดียวกัน โซลูชันนี้สามารถแก้ปัญหาการพึ่งพาคำสั่งส่วนใหญ่ได้ แต่ไม่สามารถแก้ปัญหาการพึ่งพาได้ในระหว่างกระบวนการเริ่มต้น อาจมีคำสั่งบางอย่างที่รวบรวมและการพึ่งพาการเรียนการสอนยังไม่ได้รวบรวม สำหรับตัวอย่างพิเศษพิเศษเช่นสคริปต์และเทมเพลตเท่านั้นที่โหลดเมื่อเริ่มต้นหน้า
ข้างต้นเป็นปัญหาที่พบตลอดกระบวนการโครงการ โดยทั่วไปทุกครั้งที่คุณก้าวไปข้างหน้าคุณกำลังดิ้นรนกับหลุม หลายสิ่งหลายอย่างเป็นครั้งแรกที่คุณติดต่อกับพวกเขาและฉันรู้สึกว่าฉันได้เรียนรู้อะไรบางอย่าง การแก้ปัญหาหลายอย่างอาจไม่ชัดเจนมาก คนอื่น ๆ พบปัญหาทั้งหมดข้างต้น ตราบใดที่คุณใช้เครื่องมือค้นหาได้ดีและอ่าน/เข้าใจรหัสของคนอื่นด้วยตัวคุณเองปัญหาทั้งหมดสามารถแก้ไขได้สำเร็จ
ข้อผิดพลาดบางอย่างเกี่ยวกับการโหลดแบบขี้เกียจเชิงมุมเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น