JavaScript Compressors: วิธีและเหตุผลในการลดขนาด JS . ของคุณ

เราเคยไปมาแล้ว คุณได้เรียนรู้ วิธีสร้างเว็บไซต์ที่ยอดเยี่ยม แต่เมื่อคุณเผยแพร่ มันช้าอย่างเหลือทน

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

ลดขนาดหมายถึงอะไร?

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

การลดขนาดโค้ดช่วยให้คุณลดขนาดไฟล์ได้อย่างมาก ไฟล์ที่เล็กกว่าจะเร็วกว่าสำหรับผู้ใช้ในการดาวน์โหลด หากคุณกำลังเขียน JavaScript เพียงบรรทัดเดียวหรือสองบรรทัด จะไม่มีการปรับปรุงที่เห็นได้ชัดเจน อย่างไรก็ตาม หากคุณกำลังเขียนโค้ดจำนวนมาก หรือใช้ไลบรารี่ขนาดใหญ่ เช่น jQuery ประสิทธิภาพที่เพิ่มขึ้นอย่างเห็นได้ชัดและขนาดไฟล์ที่ลดลงอย่างมากนั้นสามารถทำได้ง่าย!

หากคุณโหลดโค้ดจาก CDN ภายนอก เช่น Google Hosted Libraries คุณได้ใช้โค้ดย่อขนาดแล้ว

วิธีลบข้อมูลสำรองออกจากไทม์แมชชีน

Minified Code หน้าตาเป็นอย่างไร?

มาดูตัวอย่างกัน เป็นเรื่องยากที่จะเห็นผลกระทบของการลดขนาดบนฐานรหัสขนาดเล็ก ดังนั้นฉันจึงขออภัยล่วงหน้าสำหรับความยาวที่ยาวนาน

นี่คือบางส่วน ไม่ย่อท้อ JavaScript จากคำแนะนำในการใช้ JSON กับ Python และ JavaScript ของเรา:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

นี่คือรหัสย่อเล็กสุด:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

โค้ดย่อเวอร์ชันนี้คือ 39 เปอร์เซ็นต์ เล็กกว่า ในตัวอย่างนี้ ชื่อตัวแปรยังคงเหมือนเดิม แต่ช่องว่างและความคิดเห็นทั้งหมดถูกลบออก

นี่เป็นอีกตัวอย่างหนึ่งจากคำแนะนำของเราเกี่ยวกับ jQuery :

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

นี่คือรหัสย่อเล็กสุด:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

คราวนี้มีเพียง 26 เปอร์เซ็นต์ การลดลง -- ก็ยังดีมากสำหรับโค้ดเล็กๆ น้อยๆ เช่นนี้

นี่เป็นตัวอย่างสุดท้ายจากคู่มือ Javascript และ DOM ของเรา:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

สังเกตว่ามี มาก ของความคิดเห็นและช่องว่าง เวอร์ชันย่อเล็กสุดลดขนาดไฟล์ลง 52 เปอร์เซ็นต์ :

ย้ายใบอนุญาต windows 10 ไปยังคอมพิวเตอร์เครื่องใหม่

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

ต่อไปนี้คือขนาดของไลบรารี JavaScript ทั่วไปบางตัวเมื่อเปรียบเทียบกับเวอร์ชันย่อ:

แผนภูมิสูง: 1 MB > 201 KB
jQuery: 270 KB > 90 KB
MooTools: 164 KB > 93 KB

ไลบรารีเหล่านี้บางตัวแสดงการลดขนาดลงอย่างมากเมื่อบีบอัด ( ~80 เปอร์เซ็นต์ ) ในขณะที่คนอื่นไม่ค่อยดีนัก ( ~40 เปอร์เซ็นต์ ). ที่กล่าวมา การบันทึกใดๆ จะทำให้เว็บไซต์ของคุณเร็วขึ้นสำหรับผู้ใช้ของคุณ และลดภาระบนเว็บเซิร์ฟเวอร์ของคุณ

คุณย่อเล็กสุดได้อย่างไร?

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

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

นี่คือบทสรุปสั้นๆ เกี่ยวกับเครื่องมือออนไลน์ ส่วนใหญ่ทำงานเหมือนกัน ดังนั้นคุณไม่จำเป็นต้องกังวลมากเกินไปว่าจะเลือกอันไหน

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

ตัวย่อ JavaScript -- เครื่องมือนี้ใช้งานได้ดี แต่มันส่องประกายเหมือน API จริงๆ สิ่งนี้ช่วยให้คุณสร้างการผสานรวมหรือบริการของคุณเองบนเว็บไซต์ที่มีอยู่

JavaScript Minifier -- เว็บไซต์อื่นที่มีชื่อเดียวกัน เครื่องมือนี้ใช้งานได้ง่าย ไม่มีตัวเลือกหรือเมนู เพียงปุ่มเดียว

ลดขนาด -- เว็บไซต์นี้ดูน่าทึ่ง และนักพัฒนาได้ให้ความสนใจกับรายละเอียดที่นี่อย่างชัดเจน

รายการนี้สามารถดำเนินต่อไปได้ตลอดไป มีเครื่องมือออนไลน์มากมายในการลดขนาดเว็บไซต์จนทำให้ผิดพลาดได้ยาก

เครื่องมือย่อขนาดยังมีอยู่เป็นเครื่องมือบรรทัดคำสั่งหรือปลั๊กอินสำหรับคุณ ตัวแก้ไข JavaScript . เครื่องมือเหล่านี้มักจะใช้งานได้เร็วกว่ามาก และ 'ใช้งานได้' กับโค้ดที่คุณมีอยู่ ไม่จำเป็นต้องคัดลอกและวาง และคุณไม่จำเป็นต้องแยก JavaScript จาก HTML หรือ CSS ที่อาจอยู่ในไฟล์เดียวกัน

หากคุณกำลังใช้ Microsoft Visual Studio ตัว Bundler และ Minifier ส่วนขยายจากตลาดมีการติดตั้งมากกว่า 600,000 ครั้ง! ไม่เพียงเท่านั้น แต่ยังมีการปรับปรุงอย่างสม่ำเสมอและ มีอยู่ใน GitHub .

หากคุณเป็นแฟนของ ข้อความประเสริฐ เหมือนฉัน แล้ว ลดขนาด แพ็คเกจเป็นสิ่งที่คุณต้องการ ด้วยการติดตั้งมากกว่า 61,000 ครั้ง เป็นแพ็คเกจยอดนิยมและเป็นแพ็คเกจที่เช่นกัน มีอยู่ใน GitHub หากคุณต้องการมีส่วนร่วมในโครงการโอเพ่นซอร์ส

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

คำเตือน

ที่นั่น มี ที่จะจับใช่มั้ย? ไม่มีอะไรจะสมบูรณ์แบบได้ ใช่ มีปัญหาหนึ่งข้อ แต่ค่อนข้างน้อยและแก้ปัญหาได้ง่าย:

โค้ดย่อเล็กสุดไม่สามารถกู้คืนกลับเป็นสถานะเดิมได้

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

ในขณะที่มันเป็นไปได้ที่จะ ลดขนาด รหัสของคุณ มันไม่เหมือนเดิมอีกต่อไป ความคิดเห็นที่มีค่าทั้งหมดของคุณสูญหายไปอย่างหนึ่ง

นี่ไม่ใช่ปัญหาใหญ่ แต่คุณต้องจำไว้เสมอเมื่อทำการเข้ารหัส ตามกฎพื้นฐานแล้ว ไม่บีบอัด > การพัฒนาและ บีบอัด > การผลิต

ตอนนี้คุณรู้ทุกอย่างเกี่ยวกับการลดขนาด JavaScript แล้ว! โค้ดย่อเล็กสุดเป็นวิธีหนึ่งในการบีบประสิทธิภาพออกจากเซิร์ฟเวอร์ และเว็บไซต์ขนาดใหญ่ทั้งหมดกำลังทำอยู่

คุณใช้เครื่องมืออะไรในการย่อโค้ดของคุณ คุณยังรำคาญ? แจ้งให้เราทราบในความคิดเห็นด้านล่าง!

วิธีดาวน์โหลดเกมแฟลชบน Android

เครดิตรูปภาพ: NavinTar ผ่าน Shutterstock

แบ่งปัน แบ่งปัน ทวีต อีเมล ลบไฟล์และโฟลเดอร์ Windows เหล่านี้เพื่อเพิ่มพื้นที่ว่างในดิสก์

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

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

การเขียนโปรแกรม
JavaScript
Java
ออกแบบเว็บ

เกี่ยวกับผู้เขียน โจ โคเบิร์น(136 บทความที่ตีพิมพ์)

โจสำเร็จการศึกษาด้านวิทยาการคอมพิวเตอร์จากมหาวิทยาลัยลินคอล์น ประเทศอังกฤษ เขาเป็นนักพัฒนาซอฟต์แวร์มืออาชีพ และเมื่อเขาไม่ได้ขับโดรนหรือเขียนเพลง เขามักจะถูกมองว่าถ่ายภาพหรือผลิตวิดีโอ

เพิ่มเติมจาก Joe Coburn

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก