14 เครื่องมือสำหรับการลดขนาดจาวาสคริปต์
การลดขนาด Javascript เป็นเทคนิคที่ ควบแน่นสคริปต์ของคุณเป็นรอยขนาดเล็กมาก. คุณสูญเสียความสามารถในการอ่านของมนุษย์ แต่คุณต้องประหยัดแบนด์วิดท์เป็นจำนวนมาก - ในที่สุด, Javascript มีไว้สำหรับเบราว์เซอร์ของคุณไม่ใช่สำหรับผู้ใช้ของคุณ.
เว็บไซต์ที่ใช้งานจริงส่วนใหญ่ใช้การลดขนาด Javascript แต่วิธีการที่ได้รับนั้นแตกต่างกันมาก ตั้งแต่เครื่องมือแปลงออนไลน์อย่างง่ายไปจนถึงเครื่องมือ GUI ที่ครอบคลุมมากขึ้นไปจนถึงอินเตอร์เฟสบรรทัดคำสั่งตัวเลือกของเรานั้นมีความหลากหลาย ในบทความนี้เราจะมาดู การย่อขนาดของ Javascript ทำงานอย่างไร, วิธีที่เราสามารถสร้างมันลงในเวิร์กโฟลว์ของเราและข้อดีและข้อเสียของการลดขนาดคืออะไร.
Minification ทำงานอย่างไร
วิธีที่ดีที่สุดในการเรียนรู้สิ่งที่เกิดขึ้นเมื่อคุณลดขนาดโค้ดของคุณคือดูที่ UglifyJS Github Repository สคริปต์นี้ใช้ในเครื่องมือแปลงออนไลน์มากมายรวมถึงเครื่องมือ GUI และเครื่องมือบรรทัดคำสั่งเช่น Grunt นี่คือการแปลงบางส่วนที่ใช้เพื่อทำให้รหัสของคุณสั้นลง:
- กำจัดพื้นที่ที่ไม่จำเป็น
- ย่อชื่อตัวแปรโดยปกติเป็นอักขระเดียว
- เข้าร่วมการประกาศ var ที่ต่อเนื่องกัน
- แปลงอาร์เรย์เป็นวัตถุที่เป็นไปได้
- ปรับให้เหมาะสมถ้าคำสั่ง
- คำนวณนิพจน์ค่าคงที่แบบง่าย
- ฯลฯ.
เป็นตัวอย่างโดยย่อนี่คือฟังก์ชันที่เขียนข้อความที่กำหนด.
ฟังก์ชั่นสวัสดี (ข้อความ) document.write (ข้อความ);
สวัสดี ('ยินดีต้อนรับสู่บทความ'); เรามาดูกันว่าจะเกิดอะไรขึ้นเมื่อเราลดขนาดมันลง บันทึกการลบช่องว่างและการเยื้องและการย่อของตัวแปรข้อความ.
ฟังก์ชัน hello (e) document.write (e) hello ("ยินดีต้อนรับสู่บทความ") เครื่องมือสร้างจาวาสคริปต์ขนาดเล็ก
เครื่องมือที่ใช้สำหรับการย่อขนาด Javascript สามารถแบ่งได้เป็น 3 กลุ่มคือเครื่องมือออนไลน์เครื่องมือ GUI และเครื่องมือบรรทัดคำสั่ง.
- ด้วยเครื่องมือออนไลน์มักจะเป็นเรื่องของการวางรหัสของคุณและคัดลอกผลลัพธ์ทันที.
- เครื่องมือ GUI มักจะมีฟังก์ชั่นเพิ่มเติมมากมาย การลดขนาด JS เป็นเพียงส่วนเล็ก ๆ ของสิ่งที่พวกเขาทำ.
- เครื่องมือบรรทัดคำสั่งมักจะมีความครอบคลุมมากกว่าโดยเสนอการย่อขนาดเป็นโมดูล.
เครื่องมือออนไลน์
- javascript-minifier.com เป็นเครื่องมือที่ดูดีพร้อมกับ API
- Online YUI Compressor เป็นเครื่องมือที่มีประสิทธิภาพยิ่งขึ้นซึ่งใช้ YUI compressor ซึ่งมีตัวเลือกมากมายและความสามารถในการลดขนาดของ CSS เช่นกัน
- jscompress.com เป็น minifier ที่ไม่จีบ แต่ทำให้งานเสร็จ
- jsmini.com เป็นอีกตัวเลือกที่ง่าย แต่ใช้งานได้ทั้งหมด
ข้อดีของเครื่องมือออนไลน์คือความเร็วที่คุณสามารถใช้งานได้ เครื่องมือ GUI และบรรทัดคำสั่งที่ซับซ้อนย่อขนาดได้เร็วขึ้น แต่คุณต้องมีโครงการที่ตั้งค่าไว้เพื่อให้ทำงานได้อย่างถูกต้อง ข้อเสียของเครื่องมือเหล่านี้คือส่วนใหญ่ ให้การปรับแต่งเล็กน้อยถึงไม่มีเลย, อย่างน้อยเมื่อเปรียบเทียบกับเครื่องมือบรรทัดคำสั่ง.
เครื่องมือ GUI
- Koala เป็นเครื่องมือฟรีสำหรับการรวบรวมน้อย, SASS, การลดขนาด JS และอีกมากมาย
- Prepros เป็นแอพจ่ายข้ามแพลตฟอร์มที่ให้ตัวเลือกมากยิ่งขึ้น
- Codekit เป็นแอพที่ฉันเลือก มันเป็นแอพที่จ่ายเฉพาะ Mac เท่านั้นที่มีการรวบรวมรหัสการย่อขนาดเซิร์ฟเวอร์แสดงตัวอย่างการจัดการแพคเกจที่มีปัญหามากขึ้นและอีกมากมาย
- AjaxminGui เป็นเครื่องมือ Windows ฟรีแบบใช้ครั้งเดียวสำหรับลดขนาด JS ของคุณ
- UltraMinifier เป็นแอพฟรีสำหรับ OS X ซึ่งลดขนาด CSS และ JS ด้วยการลากและวาง
- Smaller เป็นเครื่องมือของ OS X ที่จะย่อและเชื่อมไฟล์ให้คุณ
ฉันพูดถึงแอพ GUI สองประเภทที่นี่ แอพการย่อขนาดง่ายเพียงขั้นตอนเดียวนั้นเหมือนกับของออนไลน์ มันใช้งานได้อย่างรวดเร็วมากเพราะคุณสามารถลากและวางไฟล์ลงไปได้โดยไม่ต้องตั้งค่าใด ๆ ที่กล่าวว่าพวกเขา ให้แทบจะไม่มีการปรับแต่ง.
เครื่องมือ GUI ที่มีขนาดใหญ่กว่า (Prepros, Koala, Codekit) นั้นยอดเยี่ยมในการจัดการโครงการและให้ตัวเลือกเพิ่มเติมสำหรับการบีบอัด แต่พวกเขาทำได้ ต้องการเซ็ตอัพเล็กน้อย. การย่อขนาด JS อย่างรวดเร็วจะใช้เวลาประมาณ 20 วินาทีในการตั้งค่าซึ่งมีจำนวนมากเมื่อเทียบกับกระบวนการ 2 วินาทีของเครื่องมือออนไลน์หรือเครื่องมือ GUI อย่างง่าย.
ในอีกทางหนึ่งพวกเขามีคุณสมบัติเพิ่มเติมทั่วไปและให้คุณอัตโนมัติ ไฟล์ JS ของคุณจะถูกย่อขนาดทุกครั้งที่คุณบันทึกไม่จำเป็นต้องลดขนาดด้วยตนเอง หากคุณกำลังพัฒนาบางอย่างใน Javascript นี่เป็นวิธีที่จะไป.
เครื่องมือบรรทัดคำสั่ง
- Minify สำหรับผู้ที่ต้องการย่อขนาด JS จากบรรทัดคำสั่ง แต่ไม่ต้องการตั้งค่าอะไรที่น่าสนใจใน Grunt หรือ Gulp
- Uglify.js ที่เราได้กล่าวถึงก่อนหน้านี้ยังมีให้เป็นเครื่องมือบรรทัดคำสั่งแบบสแตนด์อะโลน
- Grunt มีส่วนขยายสำหรับการลดขนาด Javascript ชื่อ grunt-contrib-uglify
- อึกยังมีการลดขนาด JS โดยใช้ Uglify.js ผ่าน gulp-uglify
เครื่องมือบรรทัดคำสั่งไม่ได้มีไว้สำหรับ Linux เท่านั้น! ฉันไม่เก่งในเทอร์มินัล แต่การตั้งค่าสิ่งต่าง ๆ เช่น Grunt และ Gulp นั้นง่ายมากผ่านเอกสารที่ยอดเยี่ยมของพวกเขา เครื่องมือบรรทัดคำสั่งที่กลับหัวกลับหางคือความยืดหยุ่นที่ยอดเยี่ยมที่คุณมีตั้งแต่ตัวเลือกไปจนถึงเอาต์พุต.
ในทางกลับกันมี บิตของเส้นโค้งการเรียนรู้. เริ่มคุ้นเคยกับบรรทัดคำสั่ง ใช้เวลาฝึกฝน (ไม่มาก) ซึ่งคุณจะพบข้อ จำกัด ก่อนที่คุณจะเริ่มเพลิดเพลินกับสิทธิประโยชน์.
ภาพรวม
หากคุณยังใหม่ต่อการพัฒนาเว็บไซต์ฉันขอแนะนำเครื่องมือ GUI สามอย่างแรก พวกเขาจะช่วยคุณจัดการโครงการของคุณโดยทั่วไปและให้มากกว่าการลดขนาด JS.
หากคุณเป็นมืออาชีพที่ช่ำชอง Grunt หรืออึก เนื่องจากสิ่งเหล่านี้เสนอการควบคุมงานอัตโนมัติมากที่สุด หากคุณต้องการลดขนาดสคริปต์อย่างรวดเร็ว โดยไม่ต้องตั้งค่าโครงการ, เครื่องมือบรรทัดคำสั่งสามารถช่วยคุณประหยัดเวลาได้มาก.
เครื่องมือแต่ละกลุ่มมีข้อดีข้อเสียและในความจริงแล้วคุณอาจจะใช้เครื่องมือตัวหนึ่งในแต่ละจุด โปรดทราบว่าเมื่ออยู่ในสภาพแวดล้อมการใช้งานจริงคุณควรย่อ Javascript และ CSS ของคุณให้เล็กลง!
