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

ฉันมี700kbไฟล์ JS ที่คลายการบีบอัดซึ่งโหลดได้ทุกหน้า ก่อนที่ผมจะมี12ไฟล์จาวาสคริปต์ในแต่ละหน้า แต่จะลด http 1 fileขอฉันบีบอัดพวกเขาในทุก

ไฟล์นี้เป็นและทำหน้าที่มากกว่า~130kb gzipped gzipอย่างไรก็ตามในคอมพิวเตอร์ภายในเครื่องจะยังคงแตกและโหลดในทุกหน้า นี่เป็นปัญหาด้านประสิทธิภาพหรือไม่

ฉันได้ทำจาวาสคริปต์กับ profiler firebug แต่ไม่เห็นปัญหาใด ๆ ปัญหา / มายาที่ฉันพบคือมีไลบรารี jquery ที่บีบอัดในไฟล์นั้นซึ่งบางครั้งไม่ได้ใช้ในหน้าปัจจุบัน

ตัวอย่างเช่น jquery datatablesนั้นมีขนาด 200kb ที่ถูกบีบอัดและมีการโหลดบนหน้าเว็บไซต์ของฉัน 2 หน้าเท่านั้น อีกประการหนึ่งคือและนั่นก็เป็นอีกหนึ่งjqplot200kb

ตอนนี้ฉันมี400kbรหัสส่วนเกินที่ไม่ได้เรียกใช้80%จากหน้าเว็บ

ฉันควรทิ้งทุกอย่างไว้ในไฟล์เดียวหรือไม่

ฉันควรนำไลบรารี jquery ออกและโหลดเฉพาะ JS ที่เกี่ยวข้องในหน้าปัจจุบันหรือไม่

คุณสามารถใช้requirejsเพื่อโหลดไลบรารีที่คุณต้องการบนหน้าเว็บแบบไดนามิกเท่านั้น จากนั้นคุณจะต้องโหลด requirejs (ซึ่งประมาณ 14k) ในทุกหน้าประหยัดประมาณ 385kb

การรวมเข้าด้วยกันนั้นง่ายมากเพียงแค่ "ห่อ" โค้ดที่คุณมีกับสิ่งที่ต้องการรวม:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

หาก framework / CMS / อะไรก็ตามที่มีฟังก์ชั่นที่เหมาะสมคุณสามารถรวมสคริปต์ตามเงื่อนไขตามที่ @Michael แนะนำ แต่ไม่มีไลบรารีเพิ่มเติม

ยกตัวอย่างกรณีข้อมูลของคุณ WordPress อาจจัดการสถานการณ์ผ่านสิ่งต่อไปนี้:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

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

JavaScript 700kb เป็นปัญหาด้านประสิทธิภาพเนื่องจากต้องมีการวิเคราะห์คำหลังจากโหลดหน้าเว็บ ด้วยเหตุนี้คุณจึงควรดูแลให้โหลดเฉพาะสคริปต์เหล่านั้นที่จำเป็นเท่านั้น JavaScript ขนาดใหญ่หนึ่งรายการอาจใช้ได้บนไซต์ AJAX เต็มรูปแบบเช่น GMail เมื่อการนำทางถูกจัดการภายในโดยไม่ต้องออกจากหน้าเดียว อย่างไรก็ตามแม้กระทั่งไซต์ AJAX เต็มรูปแบบก็ทำการโหลด JS แบบไดนามิกเพื่อป้องกันการโหลด JS ที่ไม่จำเป็นเมื่อเริ่มต้น (ทั้งหน่วยความจำและการออกความเร็ว)

คุณบอกว่าคุณต้องการลดปริมาณการใช้ http คุณควรจะเล่นกับแคช HTTP ปัญหาคือว่าการเปลี่ยนแปลงของ JS อาจไม่สามารถมองเห็นได้จนกว่าแคชจะหมดอายุหากคุณตั้งเวลาหมดอายุสูงเกินไป

มีเคล็ดลับอย่างไรว่าคุณไม่ได้หมายถึงแต่myscript.js myscript.js?version={myversion}หลังจากอัปเดตแอปพลิเคชันคุณจะเปลี่ยน{myversion}และบังคับให้โหลด JavaScript อีกครั้ง

~ 700kb ของ JavaScript เป็นปัญหาด้านประสิทธิภาพและหากมีการบีบอัดและเราต้องดูกฎที่จะต้องปฏิบัติตามในขณะที่จัดการเพื่อเพิ่มประสิทธิภาพของรหัสคือ:

1. Minify Javascripts - เพียงแค่คุณกำลังบีบอัดและคลายการบีบอัดซึ่งไม่ได้ลดรหัสก่อนอื่นให้ใช้เครื่องมือ Minify JS ที่ดีและลดขนาดรหัสของคุณ คุณคือ 12 ไฟล์และแต่ละไฟล์จะลดขนาด sepratly ก่อนที่จะทำการคอเพื่อประสิทธิภาพที่ดีที่สุด

2. ใช้การโหลด javascript แบบอะซิงโครนัสโดยใช้ผลลัพธ์การโหลดแบบอะซิงโครนัสในเวลาโหลดที่รวดเร็วและการแสดงผลของหน้าเว็บ ผลกระทบของผู้ใช้นั้นแข็งแกร่งมากเนื่องจากการโหลดแบบอะซิงโครนัสที่ดีจะไม่บล็อกกระบวนการแสดงผลและเวลาในการโหลดหน้าเว็บแบบรู้สึกถูกลดลงอย่างมาก รูปภาพและรายการที่แสดงอื่น ๆ จะปรากฏขึ้นตามปกติโดยที่ไม่มีการโหลด javascript

3. ใช้ Google CDN สำหรับ jQuery ; ฉันคิดว่าคุณกำลังใช้ JQUERY และโหลดจากเว็บไซต์ของคุณซึ่งเป็นข้อได้เปรียบเพิ่มเติมกรุณาใช้ GOOGLE CDN ​​(ฟรี) เพื่อโหลด JQUERY เนื่องจากมีการใช้งานเกือบทุกเว็บไซต์ที่ 3 และมีอยู่แล้วในคอมพิวเตอร์ไคลเอนต์ในแคช

4. Custom Long Expires Headers : บางเว็บไซต์มีการโหลดปัญหาเวลาโหลดจากนั้นคุณจะต้องให้ Long Expires สำหรับไฟล์ HTTP JS เพื่อไม่ให้ดาวน์โหลดได้ทุกครั้งซึ่งจะลดการร้องขอเป็นครั้งที่สอง จากการวิจัยของฉันเวลาโหลดในหน้าที่สองมีการออกมากขึ้นเมื่อเทียบกับการเยี่ยมชมหน้าครั้งแรก

5. ตรวจสอบกับ Page Speed : บางครั้งทรัพยากรอื่น ๆ ก็มีผลต่อความเร็วในการโหลดของหน้า cross cross และโปรดลองปรับแต่งทรัพยากรอื่น ๆ ด้วยเช่นกัน ทำตามขั้นตอนเล็กน้อยในทุก ๆ ทรัพยากรให้เวลาพิเศษกับการโหลด JS ของเรา