מדחסי JavaScript: כיצד ומדוע למזער את ה- JS שלך

מדחסי JavaScript: כיצד ומדוע למזער את ה- JS שלך

כולנו היינו שם, למדת איך בונים אתר מדהים , אבל ברגע שאתה מפרסם אותו, הוא איטי מנשוא.





הקטנת javascript שלך היא אחת הדרכים להאיץ את זמני התגובה של האתר (יחד עם דחיסת HTML ), ולמרבה המזל עבורך, זהו תהליך קל. היום אראה לך את כל מה שאתה צריך לדעת.



מה המשמעות של מיניפ?

התהליך של צמצום (אוֹ ממזער ) הוא מושג פשוט. כשאתה כותב קוד ב- JavaScript או בכל שפה אחרת, יש הרבה תכונות שנדרשות רק כדי להקל על הבנה של הקוד - למחשבים לא אכפת איך אתה קורא למשתנים שלך, או כמה מרווח יש בסוגריים, לדוגמה.





על ידי הקטנת הקוד, תוכל להקטין באופן דרסטי את גודל הקובץ שלו. לכן קובץ קטן יותר יהיה מהיר יותר עבור המשתמשים שלך להוריד. אם אתה כותב שורת JavaScript אחת או שתיים בלבד, סביר שלא יהיה שיפור ניכר. עם זאת, אם אתה כותב הרבה קוד, או משתמש בספריות גדולות כגון jQuery, ניתן להשיג בקלות ביצועים ניכרים וגודל קבצים מופחת באופן דרסטי!

אם אתה טוען קוד מתוך CDN חיצוני, כגון ספריות מתארחות בגוגל , השתמשת בקוד מצומצם.



כמה עולה ציון ה- snap שלך

איך נראה קוד מופחת?

בואו נסתכל על כמה דוגמאות. קשה לראות את ההשפעה של המיניפציה על בסיסי קוד קטנים, ולכן אני מתנצל מראש על אורכם הארוך.

הנה כמה בלתי ממוזער 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 אחוז :

כיצד להריץ חלונות באנדרואיד
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

להלן הגדלים של כמה ספריות JavaScript נפוצות בהשוואה לגירסאות המצומצמות שלהן:

  1. Highcharts: 1 MB> 201 KB
  2. jQuery: 270 KB> 90 KB
  3. MooTools: 164 KB> 93 KB

חלק מספריות אלה מציגות הפחתה משמעותית בגודל בעת דחיסה ( ~ 80 אחוז ), בעוד שאחרים לא ממש טובים ( ~ 40 אחוז ). עם זאת, כל חיסכון יהפוך את האתר שלך למהיר יותר עבור המשתמשים שלך ויפחית את העומס על שרת האינטרנט שלך.

איך מצמצמים?

עכשיו אתה יודע איך זה עובד ואיך זה נראה, בואו נצלול כיצד לעשות זאת. אל תדאג, אין צורך לשנות את הקוד שלך באופן ידני כלל! ישנם מגוון כלים הזמינים באופן חופשי אשר מטפלים בתהליך עבורך.

אלה פועלים בכמה אופנים. רוב הכלים המקוונים מאפשרים לך להעתיק ולהדביק קוד, אותו הם יעבדו ויחזרו אליך בדף. כלים אלה לרוב יאפשרו לך להעלות גם קבצים מרובים.

להלן סיכום קצר של הכלים המקוונים. הם בעיקר עובדים אותו דבר, כך שאתה לא צריך לדאוג יותר מדי מה לבחור.

דחיסת JS - אני באופן אישי משתמש באתר זה הכי הרבה אם זה רק עבודה מהירה. הוא מהיר להפעלה והם אפילו מראים לך את הכלים שבהם השתמשו לבנייתו.

ממזער JavaScript - הכלי הזה עובד טוב, אבל הוא באמת זורח כממשק API. זה מאפשר לך לבנות אינטגרציה משלך או שירות על גבי האתר הקיים שלהם.

JavaScript Minifier - אתר אחר בעל אותו שם, כלי זה פשוט כפי שהם מגיעים. אין אפשרויות או תפריטים, רק כפתור אחד.

לצמצם - אתר זה נראה מדהים, והמפתחים שים לב בבירור לפרטים כאן.

רשימה זו יכולה להימשך לנצח. יש כל כך הרבה כלים מקוונים למינימום אתרים שקשה לטעות.

כלי חיתוך קיימים גם ככלי שורת פקודה או תוספים עבור שלך עורך JavaScript . כלים אלה הם הרבה יותר מהירים לשימוש, ו'רק עובדים 'עם הקוד הקיים שלך. אין צורך להעתיק ולהדביק, ואינך צריך לחלץ את JavaScript שלך מכל HTML או CSS שעשויים להיות באותו קובץ.

אם אתה משתמש ב- Microsoft Visual Studio, באנדלר ומזעזע להרחבה מהשוק יש יותר מ -600,000 התקנות! לא רק זה, אלא שהוא מתעדכן באופן קבוע זמין ב- GitHub .

אם אתה מעריץ של טקסט נשגב כמו שאני, אז ה לצמצם החבילה היא זו שאתה רוצה. עם יותר מ -61,000 התקנות, מדובר בחבילה פופולרית מאוד, וגם כזו זמין ב- GitHub , אם תרצה לתרום לפרויקט קוד פתוח.

לבסוף, אם אתה PyCharm משתמש, אתה יכול להגדיר אותו לשילוב ישירות עם כלי דחיסה נפוצים רבים כגון מדחס YUI . רבים מהכלים הללו מפעילים ישירות את הכלים המקוונים המפורטים למעלה.

אזהרות

שם יש ל להיות תופס נכון? שום דבר לא יכול להיות מושלם. ובכן, כן, יש בעיה אחת, אך היא מינורית למדי וקלת לעקוף אותה:

לא ניתן לשחזר קוד מצומצם למצבו המקורי.

כאשר אתה ממזער קוד כלשהו, ​​צורתו המקורית הולכת לאיבוד. אתה צריך לשמור עותק שלו אם אתה רוצה לקבל תקווה לבצע שינויים גדולים בקלות - זה לא מספיק להשתמש בבקרת גרסאות.

אמנם אפשר לבטל הקוד שלך, הוא לעולם לא יהיה אותו דבר שוב. כל ההערות החשובות שלך אבדות, דבר אחד.

זו לא בעיה ענקית, אך עליך לזכור זאת בעת קידוד. ככלל בסיסי, לא דחוס > פיתוח ו דָחוּס > ייצור.

עכשיו אתה יודע כל מה שצריך לדעת על הקטנת JavaScript! צמצום קוד הוא אחת הדרכים לסחוט ביצועים מהשרת, וכל האתרים הגדולים עושים זאת.

באילו כלים אתה משתמש כדי לצמצם את הקוד שלך? אתה בכלל טורח? יידע אותנו בתגובות למטה!

כונן חיצוני של Windows 10 לא מופיע

קרדיט תמונה: NavinTar באמצעות Shutterstock

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל מחק את הקבצים והתיקיות של Windows כדי לפנות שטח דיסק

צריך לפנות שטח דיסק במחשב Windows שלך? להלן הקבצים והתיקיות של Windows שניתן למחוק בבטחה כדי לפנות מקום בדיסק.

קרא הבא נושאים קשורים
  • תִכנוּת
  • JavaScript
  • ג'אווה
  • עיצוב אתרים
על הסופר ג'ו קוברן(136 מאמרים פורסמו)

ג'ו בוגר מדעי המחשב מאוניברסיטת לינקולן שבבריטניה. הוא מפתח תוכנה מקצועי, וכשהוא לא מטיס רחפנים או כותב מוזיקה, לעתים קרובות אפשר למצוא אותו מצלם או מפיק סרטונים.

עוד מאת ג'ו קוברן

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה