ฉันรับรู้ถึงเฟืองสำหรับการรวมไฟล์จาวาสคริปต์ แต่ยังไม่ได้ลอง ตัวเลือกอื่น ๆ คืออะไรและมีวิธีการอย่างไร?
คำตอบ:
ฉันเขียนตัวจัดการสำหรับ Asp.Net ที่ใช้ YUI ในการบีบอัดเชื่อมต่อและแคชเอาต์พุต
นี่คือแหล่งที่มา: http://gist.github.com/130913
ฉันได้แก้ไขปัญหานี้แล้วในคำถามอื่น
ในการเข้าใจย้อนหลังฉันควรจะถามมันบนเว็บมาสเตอร์แทนเว็บไซต์โปรแกรมเมอร์
คุณมี 3 ตัวเลือก:
ตัวเลือก 1 (ใช้นามสกุล CakePHP):
ดาวน์โหลดและติดตั้งAssetPackerในเว็บไซต์ของคุณ (ซึ่งต้องใช้ jsmin และ CSSTidy ด้วย) แก้ไขซอร์สของคุณสองสามบรรทัดที่มีไฟล์ js Wash-> Rinse-> ซ้ำ Voila ส่วนที่เหลือจะทำโดยอัตโนมัติสำหรับคุณ
หากคุณใช้กรอบงานอื่นโอกาสก็คือมีเครื่องมือที่จะทำให้สิ่งนี้สำเร็จสำหรับคุณ มันเป็นข้อกำหนดที่ค่อนข้างธรรมดาในโลก webdev
ตัวเลือก 2 (ใช้ Apache mod):
ลองดูที่เป็นmod ของ Google Pagespeed สำหรับ Apache มันทำทุกสิ่งที่คุณอธิบายและอีกมากมาย
ตรวจสอบให้แน่ใจว่าได้ตรวจสอบทรัพยากรของเซิร์ฟเวอร์ที่ใช้งานจริงของคุณ บางคนพบปัญหาที่ทำให้โหลดบนเซิร์ฟเวอร์ของตนแย่ลง ฉันไม่ได้เป็นเชิงบวก แต่อาจต้องใช้กลยุทธ์เนื้อหาแบบคงที่เพียงพอเพื่อให้เป็นตัวเลือกที่มีประสิทธิภาพ
ตัวเลือก 3:
หากคุณต้องการจริงๆคุณสามารถสร้างเวทมนตร์ PHP ที่เชื่อมโยงไฟล์เซิร์ฟเวอร์ JS และรวมลิงค์ rel ทั้งหมดไว้ในที่เดียว แต่ ... นั่นคือสิ่งที่ทั้งสองกลยุทธ์กำลังทำอยู่แล้ว
ส่วนตัวผมขอแนะนำอย่างยิ่งกับตัวเลือกนี้
เท่าที่ฉันรู้ว่า Sprockets เชื่อมไฟล์ JS กับ AssetPacker เข้าด้วยกันมันก็ใช้งานเป็น Ruby Gem เท่านั้น สิ่งที่ไม่ทำคือลดขนาดรหัส js ดังนั้นถ้าคุณใช้มันอาจเป็นความคิดที่ดีที่จะหยิบอัญมณี jsmin ด้วย สำหรับข้อมูลเกี่ยวกับวิธีการใช้เฟือง + JSMin ใน CakePHP ตรวจสอบนี้
ฉันรู้ว่าฉันให้ความสำคัญกับ CakePHP แต่ ... ฉันสมมติว่าหากปลั๊กอินสามารถปรับให้เข้ากับ CakePHP ได้มันควรจะปรับเปลี่ยนให้เข้ากับกรอบอื่นด้วยเช่นกัน
การค้นหา google อย่างรวดเร็วพบสิ่งนี้เพื่อรวมไฟล์ CSS: http://www.tothepc.com/archives/combine-merge-multiple-css-files/
คุณแน่ใจหรือว่าต้องการรวมเข้าด้วยกัน? หากคุณใช้ไลบรารีทั่วไปคุณสามารถใช้ประโยชน์จาก CDN เพื่อส่งจาวาสคริปต์ของคุณ จากนั้นคุณสามารถใช้ประโยชน์จากการแคชเบราว์เซอร์ (สมมติว่าไซต์อื่นกำลังใช้ CDN เดียวกัน) และการส่งแบบกระจาย MicrosoftและGoogleต่างก็มีวิธีแก้ปัญหา (ฉันไม่ได้ใช้อย่างสุจริต แต่ฉันจะเริ่มอย่างแน่นอน) และอาจมีวิธีอื่น
สำหรับโครงการ ASP.NET ผมได้ทำให้มันเป็นส่วนหนึ่งของการสร้างกระบวนการของฉันอยู่บนพื้นฐานของคำแนะนำโดยคาร์ลซีกีน
Karl อธิบายได้ดีที่สุดในบล็อกของเขา แต่เวอร์ชันสั้น ๆ คือการตั้งค่าการหุ้มแอปคอนโซล YUICompressor จากนั้นคุณสามารถตั้งค่างาน post-build เพื่อเรียกแอปคอนโซลนั้นกับตำแหน่งของไฟล์ JS ในเว็บไซต์ของคุณ
หาก webapp ของคุณอยู่ใน PHP คุณควรพิจารณาใช้minify :
มันรวมไฟล์ CSS หรือ Javascript หลายไฟล์ลบช่องว่างและข้อคิดเห็นที่ไม่จำเป็นออกไปและให้บริการไฟล์เหล่านั้นด้วยการเข้ารหัส gzip และส่วนหัวแคชฝั่งไคลเอ็นต์ที่ดีที่สุด
สำหรับการรู้ Python นี้อาจเป็นประโยชน์จริง คุณสามารถเรียนรู้ Python ได้อย่างรวดเร็ว ฉันเริ่มประมาณ 2 สัปดาห์ที่ผ่านมาและใบสมัครครั้งแรกของฉัน (ซึ่งยังไม่เสร็จสิ้น) กำลังจะทำสิ่งเดียวกันกับที่คุณต้องการ เช่นคอมไพเลอร์ DotLess มันจะมีฟังก์ชั่นการเฝ้าดูที่จะดูไฟล์หรือไดเรกทอรีและหากพวกมันเปลี่ยนมันจะสร้างไฟล์ใหม่
Python นั้นยอดเยี่ยมสำหรับงานบำรุงรักษาอื่น ๆ และฉันอ่านผู้ดูแลระบบจำนวนมากชอบที่จะใช้มัน
ฉันสร้างMinifpy : เครื่องมือที่เขียนใน Python3 (รองรับระบบปฏิบัติการ Mac OS, Windows และ Linux) เพื่อรวมและย่อขนาดไฟล์ JS และ CSS โดยใช้ Python
Minifpy ใช้ไฟล์กำหนดค่า JSON ที่ง่ายมากเพื่อกำหนดว่าไฟล์ใดที่จะต้องรวมลดขนาดหรือไม่:
{
"js": {
"minify_files": [
{"from": "static/file.js", "to":"static/file.min.js"},
],
"merge_files": [
{"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
]
},
"css" : {
"minify_files": [
{"from": "static/file.css", "to":"static/file.min.css"},
],
"merge_files": [
{"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
]
}
}คุณยังสามารถใช้เครื่องมือนี้ใน CLI
Minifpy ตรวจจับการแก้ไขใด ๆ ในไฟล์ JS / CSS และรวม / ย่อขนาดโดยอัตโนมัติ (มีประโยชน์สำหรับการพัฒนา)