สารบัญ[ซ่อน][แสดง]
- ดังนั้นสหพันธ์โมดูลคืออะไร?
- ทำไมต้องสหพันธ์โมดูล?
- ส่วนประกอบหลักของสหพันธ์โมดูล
คุณสมบัติหลักของสหพันธ์โมดูล+-
- ประสิทธิภาพเว็บที่ยอดเยี่ยม
- การพัฒนาที่มีประสิทธิภาพ
- ความสามารถในการรักษาตัวเองและความซ้ำซ้อน
- การจัดการการพึ่งพาทั่วไปอย่างมีประสิทธิภาพ
- แทนที่จะต้องปรับใช้ผู้บริโภคอีกครั้ง ให้ปรับใช้โค้ดอิสระ
- เมื่อรัน ให้นำเข้าโค้ดจากบิลด์อื่น
- ปรับปรุงประสบการณ์ของนักพัฒนาในขณะที่รักษาประสบการณ์ของลูกค้า
- ส่วนหน้าแบบไมโครทำงานในลักษณะเสาหิน
- สรุป
แนวคิดของไมโครฟรอนท์เอนด์นำไมโครเซอร์วิสมาใช้กับการพัฒนาฟรอนท์เอนด์
แนวคิดคือแบ่งแอปพลิเคชันหรือเว็บไซต์ออกเป็นชิ้นเล็กๆ ที่พัฒนาขึ้นโดยอิสระ จากนั้นจึงเชื่อมต่อระหว่างรันไทม์ แทนที่จะสร้างให้เป็นชิ้นเดียวที่ยึดติดกัน
วิธีนี้ช่วยให้คุณสร้างส่วนประกอบอื่นๆ ของแอปพลิเคชันโดยใช้เทคโนโลยีอื่นและกับทีมอิสระ
แนวคิดคือการลดค่าใช้จ่ายในการบำรุงรักษาที่เกี่ยวข้องกับเสาหินทั่วไปโดยแบ่งส่วนการพัฒนาในลักษณะนี้
ด้วยการอนุญาตให้พวกเขามุ่งความสนใจไปที่พื้นที่เฉพาะของแอปพลิเคชันในฐานะทีมที่เชื่อมโยงกัน มันทำให้รูปแบบใหม่ของความร่วมมือระหว่างผู้พัฒนาแบ็กเอนด์และฟรอนต์เอนด์เป็นไปได้
ตัวอย่างเช่น คุณอาจมีทีมที่รับผิดชอบความสามารถในการค้นหาหรือแง่มุมอื่นๆ ของผลิตภัณฑ์หลักที่มีความสำคัญต่อธุรกิจแต่เพียงผู้เดียว
ต้องขอบคุณการรวมโมดูล คุณมีฟังก์ชันเพียงพอที่จะจัดการกับเวิร์กโฟลว์ที่ ไมโครฟรอนท์เอนด์ เข้าใกล้อาณัติ
โพสต์นี้จะเจาะลึกถึงสถาปัตยกรรมของการรวมโมดูล ตลอดจนคุณลักษณะหลักและรูปแบบแอปพลิเคชัน
ดังนั้น a . คืออะไร สหพันธ์โมดูล?
การออกแบบการรวมโมดูลของ Javascript ทำให้ใช้ชิ้นส่วนที่นำกลับมาใช้ใหม่ได้ในหลายแอปพลิเคชัน
เป็นศัพท์แสงพื้นฐานที่ค่อนข้างธรรมดา แต่ฉันแค่ทำให้มันดูสดใส
เนื่องจากเราทุกคนคุ้นเคยกับการแชร์ส่วนประกอบภายในแอปพลิเคชัน React การรวมโมดูลจึงบรรลุเป้าหมายเดียวกันในทางปฏิบัติ ยกเว้นว่าจะแสดงโมดูลแอปพลิเคชันแบบไดนามิกสำหรับการบริโภคโดยแอปพลิเคชันอื่น
สหพันธ์โมดูลพยายามที่จะเอาชนะปัญหาการแชร์โมดูลในระบบแบบกระจายโดยส่งองค์ประกอบที่ใช้ร่วมกันที่สำคัญเหล่านั้นเป็นมาโครหรือไมโครตามที่ต้องการ
ซึ่งทำได้โดยการลบออกจากแอพและเวิร์กโฟลว์ของบิลด์
ทำไมต้องสหพันธ์โมดูล?
นี่คือปัจจัยบางประการที่การรวมโมดูลสามารถจัดการได้อย่างง่ายดาย:
- ภายนอกและ DLL (ไลบรารีลิงก์ไดนามิก) เป็นสิ่งเดียวที่เรามีเป็นครั้งคราวสำหรับการแชร์ฟังก์ชันการทำงานระหว่างแอป ทั้งหมดนี้ทำให้การแชร์รหัสการปรับขนาดเป็นสิ่งที่ท้าทายอย่างยิ่ง
- NPM ซบเซา
- เมื่อโปรแกรมสองโปรแกรมแยกกันใช้รหัสที่สำคัญร่วมกัน โปรแกรมเหล่านั้นจะต้องเป็นแบบไดนามิกและยืดหยุ่น
เพื่อให้แอปแบบสแตนด์อโลนอยู่ในพื้นที่เก็บข้อมูลของตนเองโดยสิ้นเชิง ปรับใช้แยกต่างหาก และทำงานเป็น SPA อิสระของตนเอง การเชื่อมโยงโมดูลจึงถูกสร้างขึ้น
ส่วนประกอบหลักของสหพันธ์โมดูล
ก่อนที่จะเจาะลึกลงไป ให้พูดคุยสั้นๆ เกี่ยวกับแนวคิดใหม่สองสามข้อที่การรวมโมดูลนำมาซึ่งเป็นสิ่งสำคัญ
- โฮสต์: เมื่อเพจโหลด บิลด์หรือโมดูลที่เริ่มต้นในขั้นต้นจะเรียกว่าโฮสต์ ผู้ให้บริการสามารถถือได้ว่าเป็นโฮสต์
- รีโมต: รีโมตเป็นโครงสร้างที่แตกต่างกันซึ่งใช้ส่วนหนึ่งของโฮสต์ พวกเขายังเรียกว่าลูกค้า
- โฮสต์แบบสองทิศทาง: บิลด์ Webpack ที่ทำหน้าที่เป็นทั้งรีโมตที่โฮสต์อื่นใช้และโฮสต์ที่ใช้รีโมต
- สหพันธ์ผู้ขาย: เปิดใช้งานการแชร์รันไทม์ที่ใช้ร่วมกันอย่างเปิดเผยของการพึ่งพาโมดูล npm สำหรับโฮสต์หรือรีโมต โดยไม่คำนึงถึงตำแหน่งที่จะโหลด ปัญหาด้านประสิทธิภาพที่สำคัญประการหนึ่งของไมโครฟรอนท์เอนด์ได้รับการแก้ไขด้วยวิธีนี้
รูปแบบของการสมัครสหพันธรัฐ
ระบบการออกแบบเอเวอร์กรีน
รูปแบบพื้นฐานที่สุดของแอปพลิเคชันแบบรวมศูนย์คือ "รีโมตแบบเอเวอร์กรีน" ซึ่งเป็นรีโมตที่ใช้ร่วมกันเช่น "ระบบการออกแบบ" หรือ "ไลบรารีคอมโพเนนต์" ที่แจกจ่ายและอัปเดตอย่างอิสระสำหรับผู้ใช้ทั้งหมด
หากไม่มีทีมแอปแต่ละทีมที่ต้องใช้เวลาในการแก้ไข การทำเช่นนี้อาจเป็นประโยชน์ในการทำให้แน่ใจว่าเว็บไซต์ออนไลน์ทั้งหมดปฏิบัติตามอัตลักษณ์องค์กรล่าสุด
ในการออกแบบและกำหนดขีดจำกัดและขั้นตอนที่จำเป็นในการรับประกันการอัปเดตที่ปลอดภัยและต่อเนื่อง นี่อาจเป็นจุดที่มีประโยชน์สำหรับธุรกิจในการเริ่มต้นเมื่อพิจารณาสถาปัตยกรรมแอปพลิเคชันแบบรวมศูนย์
ต่อไปนี้คือกรณีการใช้งานบางส่วนที่รีโมตที่ใช้ร่วมกันที่ปรับใช้อย่างอิสระอาจมีความเหมาะสม:
- ออกแบบระบบ
- เปลือกแอปพลิเคชัน
- ไลบรารีส่วนประกอบ
- ผู้บริโภค
- ชุดเครื่องมือที่ใช้ร่วมกัน
- โมเดลการกระจายทางเลือกสำหรับวิดเจ็ตที่ใช้โดยภายในหรือภายนอก
การแชร์โมดูล Multi-SPA
นำคุณลักษณะที่ส่งออกไปแล้วมาใช้ซ้ำ เช่น ส่วนประกอบ ในแอปหน้าเดียวแบบสแตนด์อโลนต่างๆ ประโยชน์รวมถึง:
- ผู้บริโภคได้รับการอัปเดตอัตโนมัติ
- ความเชี่ยวชาญด้านโดเมนยังคงอยู่ในทีมที่รับผิดชอบ
- ปรับปรุงขั้นตอนการปรับใช้เนื่องจากไม่จำเป็นต้องมีการเผยแพร่โมดูลแยกต่างหาก
สหพันธ์ขับเคลื่อนด้วยเชลล์
สหพันธ์ที่ขับเคลื่อนด้วยเชลล์ประกอบด้วย:
- เมื่อสร้างเวอร์ชันผลิตภัณฑ์ใหม่ ทีมผลิตภัณฑ์จะไม่รอให้ทีม Checkout ทำงานให้เสร็จ
- เมื่อสลับรีโมท จะไม่มีการโหลดหน้าซ้ำ
- เมื่อจำเป็น เชลล์เสนอการโหลดจากระยะไกลที่ช้าและการกำหนดเส้นทาง (ระดับบนสุด)
- การกำหนดเส้นทางข้ามรีโมตสามารถทำได้ผ่านการรวมกลุ่มผู้ขาย ซึ่งช่วยให้สามารถนำแพ็คเกจ npm ที่ใช้บ่อยมาใช้ซ้ำได้
- เชลล์เสนอเฟรมเวิร์กและการขึ้นต่อกันทั่วไปอื่นๆ ที่รีโมตโหลดแบบ lazy กลับมาใช้ใหม่
สหพันธ์มัลติเชลล์
คล้ายกับสหพันธ์ที่ขับเคลื่อนด้วยเชลล์ที่อธิบายไว้ข้างต้น แต่ใช้เชลล์ต่างกัน
ประกอบด้วย:
- เปลือกหอยจำนวนหนึ่ง
- การติดฉลากสีขาว
- เชลล์ B ไม่จำเป็นต้องใช้รีโมตทั้งหมดหรือมีการใช้งานอิสระ
คุณสมบัติหลักของสหพันธ์โมดูล
ประสิทธิภาพเว็บที่ยอดเยี่ยม
ปัญหาเกี่ยวกับองค์ประกอบโมดูล NPM ปกติคือเมื่อจำนวนผู้ติดตามเพิ่มขึ้น ขนาดของแอปพลิเคชันก็จะเพิ่มขึ้น
เพื่อหลีกเลี่ยงไม่ให้โหลดบันเดิลเมื่อแอปพลิเคชันของคุณโหลดและโหลดเมื่อจำเป็นเท่านั้น การเชื่อมโยงโมดูลจะมอบความสามารถในการโหลดบันเดิลอย่างเกียจคร้าน
ซึ่งจะช่วยป้องกันความจำเป็นในการดาวน์โหลดโมดูลก่อนที่จะจำเป็นจริงๆ ซึ่งจะช่วยปรับปรุงความเร็วของไซต์
การพัฒนาที่มีประสิทธิภาพ
แต่ละโปรเจ็กต์สามารถผลิตและจัดส่งแยกกันได้ และสามารถดำเนินการโดยทีมต่างๆ ได้ เนื่องจากสหพันธ์โมดูลสนับสนุนให้คุณจัดระเบียบแอปพลิเคชันของคุณเป็นโปรเจ็กต์แยกกัน เพื่อให้คุณสามารถสร้างและใช้งานแยกกันได้ (และด้วยเหตุนี้ในแบบคู่ขนาน)
ความสามารถในการรักษาตัวเองและความซ้ำซ้อน
การขึ้นต่อกันแบบแบ่งใช้ช่วยให้ Module Federation ติดตามการขึ้นต่อกันของโปรแกรมทั้งหมดของคุณได้ในที่เดียว
ด้วยวิธีนี้ แม้ว่าแอปพลิเคชันจะไม่ประกาศการพึ่งพาหรือเมื่อมีปัญหาเครือข่าย ก็ยังรู้ว่าต้องการอะไรและสามารถจัดการการดาวน์โหลดได้ตามต้องการ
การจัดการการพึ่งพาทั่วไปอย่างมีประสิทธิภาพ
นอกจากนี้ Module Federation ยังเสนอการจัดการการพึ่งพาที่เหนือกว่า การแก้ไขข้อกำหนดของผู้จำหน่ายและบุคคลที่สามอย่างมีประสิทธิภาพ เพื่อให้แอปพลิเคชันของคุณไม่โหลดไลบรารีมากกว่าหนึ่งเวอร์ชัน
แทนที่จะต้องปรับใช้ผู้บริโภคอีกครั้ง ให้ปรับใช้โค้ดอิสระ
นักพัฒนามีความสนใจอย่างมากที่จะมีฟังก์ชันที่เขียวชอุ่มตลอดปี เมื่อฟังก์ชันการทำงานที่ขึ้นต่อกันที่ถูกเปิดเผยเปลี่ยนไป ไม่จำเป็นต้องติดตั้งผู้ใช้บริการใหม่อีกต่อไป
ฉันต้องยอมรับว่านี่เป็นคุณสมบัติที่มีศักยภาพสูงในตัวของมันเอง ซึ่งจะต้องตรวจสอบอย่างรอบคอบเพื่อป้องกันผลลัพธ์ที่ไม่คาดคิด
เมื่อรัน ให้นำเข้าโค้ดจากบิลด์อื่น
เมื่อใช้โมเดลแพ็กเกจ NPM เราอาจพิจารณาแอปที่ใช้ Module Federation ที่คล้ายกับ API แทนที่จะแชร์โค้ดและนึกถึง "ไลบรารี"
ในลักษณะเดียวกันกับที่พวกเขาสามารถรับฟังก์ชันจากแอปอื่น ๆ ได้ ขณะนี้เว็บแอปพลิเคชันสามารถให้ฟังก์ชันกับแอปพลิเคชันอื่นได้
ปรับปรุงประสบการณ์ของนักพัฒนาในขณะที่รักษาประสบการณ์ของลูกค้า
ใด ผู้พัฒนา JavaScript จะค่อนข้างสะดวกกับ Module Federation เพราะเป็นปลั๊กอิน Webpack ที่สามารถเข้าถึงได้ตั้งแต่ Webpack เวอร์ชัน 5
สิ่งนี้ค่อนข้างแข็งแกร่งและน่าสนใจหากเราลองคิดดู
โดยใช้ตัวโหลด Webpack ของบริษัทอื่น ให้พิจารณาส่วนประกอบทั้งหมดที่ webpack บันเดิล รวมถึงสคริปต์ เนื้อหา สไตล์ รูปภาพ มาร์กดาวน์ และอื่นๆ
ด้วยการใช้การรวมโมดูล สิ่งเหล่านี้สามารถใช้ร่วมกันและรวมเข้าด้วยกัน
ส่วนหน้าแบบไมโครทำงานในลักษณะเสาหิน
การเพิ่มฟังก์ชันการทำงานที่ใช้ร่วมกันให้กับแอปพลิเคชันของคุณนั้นค่อนข้างง่าย เพียงนำเข้าบันเดิลตามปกติหรือใช้การโหลดแบบซิงโครนัส
อีกทางหนึ่ง สามารถใช้การโหลดแบบอะซิงโครนัสเพื่อโหลดการขึ้นต่อกันเมื่อจำเป็นเท่านั้นโดยใช้การโหลดแบบ Lazy Loading
สรุป
ในโพสต์นี้ เราได้กล่าวถึงการรวมโมดูลว่าเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการพัฒนาแอปพลิเคชันไมโครฟรอนท์เอนด์ของคุณ
การให้แอปแลกเปลี่ยนและใช้ฟังก์ชันการทำงานขณะรันไทม์ช่วยส่งเสริมความสามารถในการปรับขนาดโดยทำให้ทีมต่างๆ ทำงานบนแอปพลิเคชันอิสระได้
เมื่อฟังก์ชันทั่วไปเปลี่ยนไป คุณไม่จำเป็นต้องออกแบบและปรับใช้ผู้บริโภคของคุณ เนื่องจากฟังก์ชันนี้รองรับฟังก์ชันที่เป็นมิตรกับสิ่งแวดล้อม
โปรแกรมของคุณจะทำงานเหมือนเสาหินหลังจากที่ได้รับการตั้งค่าแล้ว ซึ่งยอดเยี่ยมมาก
การพึ่งพาที่แชร์ได้จะใช้เพื่อลดขนาดของแอป เนื่องจากนักพัฒนาหลายคนคุ้นเคยกับสภาพแวดล้อม Webpack อยู่แล้ว ประสบการณ์ของนักพัฒนาจึงยอดเยี่ยม
เขียนความเห็น