ฉันควรรวมไฟล์ js / css ไว้ในไฟล์เดียวหรือไม่

11

ทั้งYSlowและPage Speedของ Google ขอแนะนำให้รวมไฟล์สคริปต์ (และสไตล์) ไว้ในไฟล์เดียวเพื่อลดจำนวนคำขอ HTTP และฉันสามารถเห็นประเด็นนี้เมื่อไฟล์สคริปต์สอดคล้องกันทั่วทั้งไซต์ แต่สำหรับเว็บแอปพลิเคชันที่มีข้อกำหนดแตกต่างกันในเว็บไซต์

วิธีที่ฉันเห็นมันมีตัวเลือกน้อย:

รวมไฟล์ทั้งหมดที่ใช้ข้ามไซต์และทุกหน้าจะได้รับไฟล์ที่รวมกัน - ข้อเสียคือเนื้อหาที่ไม่ได้ใช้ซึ่งมีความยุ่งเหยิงในสคริปต์ (และการโหลดครั้งแรกที่หนักกว่า
รวมไฟล์เข้าด้วยกันในแต่ละหน้า - ข้อเสียคือแต่ละหน้าที่มีข้อกำหนดที่แตกต่างกันจะได้รับไฟล์รวมที่แตกต่างกัน (การโหลดครั้งแรกที่หนักกว่าสำหรับแต่ละประเภทเพจ)
เพิกเฉยต่อการตีความคำแนะนำ 'ไฟล์เดียวเท่านั้น' อย่างเข้มงวดและให้โหลดหน้าเว็บหลายไฟล์ตามความเหมาะสมโดยหวังว่าการแคชจะลบจำนวนคำขอ HTTP ในกรณีทั่วไป - ข้อเสียคือจำนวนคำขอ HTTP ในแต่ละหน้า

คิด?

optimization css javascript

— Cebjyre
แหล่งที่มา

คุณทำผิด แยกส่วนออกเป็นไฟล์ ๆ ละไฟล์และรับ warmup Hit (เกิดจาก # คำขอที่มีขนาดใหญ่ขึ้นและ cold cache) หรือรวมโปรแกรมซอร์สไฟล์เซิร์ฟเวอร์และให้บริการเพียง 1 js, css, html page ต่อฮาร์ดลิงก์ การผสมไฟล์ด้วย mime-types = bad

— Evan Plaice

และ ... เช่น @Larry Smithmier กล่าวในคำตอบของเขาใช้ CDN (เช่น Google) เพื่อส่งไลบรารี่ทั่วไป (เช่น jquery) เพื่อหลีกเลี่ยงค่าใช้จ่ายในการทำให้แคชอุ่นเครื่องเริ่มต้นสำหรับไฟล์เหล่านั้น

— Evan Plaice

11

ตัวเลือกที่ 2 นั้นแย่ที่สุด หมายความว่าทุกหน้าที่มีการรวมกันของสคริปต์ JS ที่ต้องการจะส่งผลให้มีการร้องขอ HTTP มันจะทำให้ประสิทธิภาพการทำงานมากเลวร้ายยิ่ง

ตัวเลือกที่ 1 ดีที่สุด ในที่สุดผู้ใช้ส่วนใหญ่จะเข้าชม "ประเภท" หน้าส่วนใหญ่ของเว็บไซต์ของคุณดังนั้นจึงยังมีข้อได้เปรียบที่จะรวมทุกอย่างไว้ในไฟล์เดียวโดยอาจยกเว้นไฟล์ JS ขนาดใหญ่ที่ต้องการในหน้าเว็บที่ไม่ค่อยมีคนเข้าชม

การเข้าชมหน้าแรกอาจช้ากว่าการใช้ไฟล์ต่าง ๆ แต่ก็คุ้มค่าที่จะทำเพราะการเข้าชมหน้าอื่น ๆ จะใช้ JS ทั่วโลกที่แคชไว้

หนึ่งเคล็ดลับแม้ว่า; รวมพวกเขาโดยอัตโนมัติหากคุณยังไม่ได้!

— โทมัสโบนินี
แหล่งที่มา

2

แม้ว่าคุณจะต้องตระหนักถึงการแสดงผลเริ่มต้นที่กำหนดโดยหน้าแรก / หน้า Landing Page ของคุณ หากหน้าแรกที่ผู้เข้าชมเห็นโหลดช้าพวกเขาอาจไม่สนใจดูหน้าสอง

— pelms

ตัวเลือกอื่นโดยเฉพาะหากไซต์ของคุณขึ้นอยู่กับหน้าที่เชื่อมโยงไปถึงหรือการแสดงผลครั้งแรกอย่างมากคือการลดขนาดของไฟล์ที่แสดงในหน้าแรกนั้นจากนั้นให้บริการไฟล์ที่รวมกันในหน้าอื่น ๆ

— Travis Northcutt

4

ฉันมักจะรวม "global Javascript" - jQuery และปลั๊กอินทั่วไป - เป็นไฟล์เดียวจากนั้นให้บริการปลั๊กอินพิเศษเป็นไฟล์แยกเมื่อจำเป็น

ตัวอย่างเช่นไซต์หนึ่งที่ฉันเรียกใช้หลายหน้ามีตารางข้อมูลอยู่ในนั้นฉันจึงมี a global.jsด้วย jQuery, DataTables และ SuperFish (สำหรับเมนูของฉัน) มีสองหน้าในเว็บไซต์ที่ใช้ "ไลท์บ็อกซ์" ดังนั้นฉันจึงมีสคริปต์แยกต่างหากสำหรับทั้งสองหน้า

สำหรับ CSS ฉันให้บริการไฟล์เดียวสำหรับทั้งไซต์และพยายามทำให้ CSS เป็นเรื่องธรรมดาที่สุด - หน้าส่วนใหญ่มีองค์ประกอบ CSS ที่ไม่ซ้ำกันเพียงเล็กน้อย

— DisgruntledGoat
แหล่งที่มา

1

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

หาก JS ของคุณเพียงพอที่จะถูกผลักเข้าไปในหมวดหมู่ที่สองคุณสามารถปรับปรุงความเร็วในการรับรู้เริ่มต้นของหน้าซึ่งจะทำให้ผู้ใช้ของคุณได้รับประสบการณ์ที่ดีขึ้น

— JasonBirch
แหล่งที่มา

1

ฉันจะไม่แนะนำให้รวมพวกเขาทั้งหมด หากคุณกำลังใช้ไลบรารีทั่วไปคุณสามารถใช้ประโยชน์จาก CDN เพื่อส่งจาวาสคริปต์ของคุณ จากนั้นคุณสามารถใช้ประโยชน์จากแคชเบราว์เซอร์ (สมมติว่าไซต์อื่นกำลังใช้ CDN เดียวกัน) และการส่งแบบกระจาย MicrosoftและGoogleต่างก็มีวิธีแก้ปัญหา (ฉันไม่ได้ใช้อย่างสุจริต แต่ฉันจะเริ่มอย่างแน่นอน) และอาจมีวิธีอื่น ในบันทึกที่เกี่ยวข้องดังนั้นมีคำถามนี้:

เบราว์เซอร์ล้างแคช JavaScript อัตโนมัติเมื่อใด

และคำตอบแรกคือทองคำ

— Larry Smithmier
แหล่งที่มา

2

ฉันใช้ห้องสมุด jQuery ของ Google อยู่แล้ว แต่ฉันหมายถึงคำถามนั้นเพื่ออ้างถึงไฟล์เฉพาะไซต์ (เช่นสำหรับไซต์แลกเปลี่ยนสแต็คเมื่อถามคำถามคุณมีสคริปต์เพื่อค้นหาคำถามที่คล้ายกันสคริปต์ที่จะแสดง markdown และคำแนะนำเกี่ยวกับแท็กซึ่งทั้งหมดนี้อาจต้องการนำไปพัฒนาเป็นไฟล์แยกต่างหาก) นอกจากนี้หากคุณใช้ Google jQuery โฮสต์ js ขณะที่ 1.4 และ 1.4.2 จะให้เนื้อหาเดียวกันกับคุณ (ในขณะนี้) 1.4.2 จะถูกแคชเป็นเวลาหนึ่งปี แต่ 1.4 จะถูกแคชเป็นเวลาหนึ่งชั่วโมงเท่านั้น

— Cebjyre

เคล็ดลับเด็ด! ขอบคุณสำหรับข้อมูลเชิงลึกเกี่ยวกับระยะเวลาแคชบนโฮสต์ jQuery

— Larry Smithmier