เมื่อเร็ว ๆ นี้ฉันกำลังคิดเกี่ยวกับวิธีการรวมไฟล์ JS front-end แน่นอนว่าไม่รวมไฟล์ที่ไม่สามารถรวมได้ แต่ไฟล์ที่เราสามารถรวมได้ หลังจากคิดถึงมันควรมีเพียงสามวิธี
ทั้งสามวิธีมีดังนี้:
1. ไฟล์ขนาดใหญ่ทั้งหมด JS รวมกันเป็นไฟล์ขนาดใหญ่หนึ่งไฟล์และหน้าทั้งหมดอ้างถึง
2. แต่ละหน้าเป็นไฟล์ขนาดใหญ่และแต่ละหน้ารวมกันเพื่อสร้างไฟล์ขนาดใหญ่ของ JS ของคุณเอง
3. รวมไฟล์ขนาดใหญ่ที่ใช้ร่วมกันหลายไฟล์รวมไฟล์ JS ที่แชร์หลายรายการตามการปฏิบัติและแต่ละหน้าหมายถึงไฟล์ขนาดใหญ่ที่แชร์หลายรายการ
นอกจากนี้ในความคิดของฉันการผสานมีสองวัตถุประสงค์:
1. เพื่อลดจำนวนคำขอ
2. ข้อควรพิจารณาด้านความปลอดภัยของรหัส (ยิ่งมีการแบ่งไฟล์มากเท่าไหร่ก็จะยิ่งเห็นได้ง่ายขึ้น)
PS: โปรดทราบว่าสิ่งที่ฉันกำลังพูดถึงไม่ใช่ความสับสนในการบีบอัดเพียงแค่ผสาน
1. ไฟล์ขนาดใหญ่
วิธีนี้คือการรวม JS ทั้งหมดเข้ากับไฟล์ขนาดใหญ่โดยไม่คำนึงถึงสถานการณ์และทุกหน้าอ้างถึงแม้ว่าจะไม่ได้ใช้รหัสบางอย่างก็ตาม
ข้อได้เปรียบ:
(1). มันง่ายที่จะรวมและใช้งานง่าย
(2). หน้าอื่น ๆ สามารถโหลดได้โดยใช้การเพิ่มประสิทธิภาพแคช
ข้อบกพร่อง:
(1). หน้าอาจโหลดลงในรหัสที่ไม่ได้ใช้ในหน้านี้
ไม่เกี่ยวข้องกับสถานการณ์:
(1). วิธีนี้ไม่เหมาะสำหรับแอปพลิเคชันเว็บขนาดใหญ่และไม่ว่าจะเป็นรหัสไฟล์เดียวความซับซ้อนของธุรกิจไม่อนุญาตให้เราทำสิ่งนี้ (ฉันไม่เคยเห็นเว็บไซต์ทำสิ่งนี้)
สถานการณ์ที่เกี่ยวข้อง:
(1). แอพพลิเคชั่นไฮบริดไม่ว่าจะเป็นแอพพลิเคชั่นไฮบริดของมือถือหรือแอพพลิเคชั่นไฮบริดของพีซี (แอพพลิเคชั่นเดสก์ท็อปคล้ายกับกรอบการพัฒนาทีม YouDAO Hex+Chromium+NodeJS) นั้นเหมาะสมมากและจะไม่มีปัญหาความเร็วในการร้องขอ ความปลอดภัยของรหัสของแอปพลิเคชันดังกล่าวที่อยู่ในรหัสไคลเอนต์มีความสำคัญมากกว่า
PS: แน่นอนสิ่งที่สำคัญที่สุดคือความปลอดภัยของแบ็กเอนด์ ไม่ว่าส่วนหน้าจะแตกหรือไม่ไม่ว่าแบ็กเอนด์จะปรับปรุงการตรวจสอบอินพุตและไม่ว่าจะเป็นการป้องกันการใช้อำนาจมากเกินไปแบ็กเอนด์เป็นกุญแจสำคัญซึ่งหมายความว่าคำพูด "ไม่ไว้วางใจอินพุตใด ๆ จากผู้ใช้"
2. ไฟล์ขนาดใหญ่ในแต่ละหน้า
รวมแต่ละหน้าเพื่อสร้างไฟล์ขนาดใหญ่ของ JS ของคุณเองและสร้างการผสาน JS หลายตัว
ข้อได้เปรียบ:
(1). แต่ละหน้าใช้ JS ที่แม่นยำที่สุดและจะไม่มีรหัสที่ไม่เกี่ยวข้อง
ข้อบกพร่อง:
(1). มีหลายหน้าจะมีการสร้าง JS หลายหน้าส่งผลให้มีความซ้ำซ้อนจำนวนมากในรหัส JS ทั่วไป
(2). ไม่สามารถโหลดส่วนที่ใช้ร่วมกันได้โดยใช้การเพิ่มประสิทธิภาพแคช
(3). การรวมและการใช้งานจะค่อนข้างซับซ้อน
ฉันมักจะคิดว่ามีบางอย่างผิดปกติกับวิธีนี้ แอปพลิเคชันขนาดเล็กสามารถจัดการได้โดยตรงด้วยไฟล์ขนาดใหญ่และแอปพลิเคชันขนาดใหญ่จะไม่ทำเช่นนี้และไม่สามารถใช้กับแอปพลิเคชันไฮบริดได้ ในกรณีนี้ที่ขนาดแพ็คเกจการติดตั้งเป็นสิ่งสำคัญรหัสซ้ำซ้อนไม่สามารถทนได้ เมื่อฉันคิดถึงสถานการณ์ต่าง ๆ ฉันพบว่ามันสามารถแก้ไขได้โดยใช้วิธีข้างต้นหรือด้านล่างและมันก็ดีกว่าดังนั้นฉันคิดว่าวิธีนี้ไร้ประโยชน์
3. รวมไฟล์ขนาดใหญ่ที่ใช้ร่วมกันหลายไฟล์
จากการปฏิบัติรวมถึงการรวมไฟล์ขนาดใหญ่ที่ใช้ร่วมกันหลายไฟล์ (เช่นการจำแนกประเภทไลบรารีการพึ่งพา) และรวมไฟล์ JS ที่ต้องการ (เช่นการจำแนกทางธุรกิจ) แต่ละหน้าจะหมายถึงไฟล์ขนาดใหญ่ที่ใช้ร่วมกันอย่างน้อยหนึ่งไฟล์และไฟล์ JS ของหน้านี้
ข้อได้เปรียบ:
(1). ส่วนที่ใช้ร่วมกันจะถูกโหลดและการอ้างอิงไปยังแต่ละหน้าสูงที่สุดเท่าที่จะทำได้โดยไม่ซ้ำซ้อน
ข้อบกพร่อง:
(1). จะมีบางหน้ามากหรือน้อยที่จะอ้างอิงรหัสที่ไม่ต้องการและการแบ่งปันไม่ใช่การแบ่งปันที่สมบูรณ์
สถานการณ์ที่เกี่ยวข้อง:
(1). การใช้งานทั้งขนาดใหญ่และขนาดเล็กนั้นเหมาะสมกว่า แต่ละหน้าอาจมีชิ้นส่วนทั่วไปมากมายและการรวมไฟล์ที่สมเหตุสมผลจะมีความสำคัญมาก
สรุป
เอกสารนี้เป็นเพียงความคิดและเป็นเพียงการสนทนาทั่วไป มีวิธีการมากมายสำหรับการรวมไฟล์ซึ่งสร้างขึ้นแบบไดนามิกโดยแบ็กเอนด์หรือสร้างขึ้นโดยตรงโดยเครื่องมือ (Grunt+Requirejs) วิธีการรวมสามวิธีข้างต้นจะถูกกำหนดโดยความต้องการในทางปฏิบัติของเรา
การรวมกันเป็นสิ่งสำคัญมาก แต่ไม่แนะนำให้รวมเอกสารทั้งหมด เอกสารบางอย่างไม่สามารถรวมกันได้ บางรายการดีกว่าสำหรับแต่ละเอกสาร แต่ขึ้นอยู่กับสถานการณ์เฉพาะ
สามวิธีข้างต้นในการรวมไฟล์ JS front-end เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น