כלים עבור Minifying Javascript

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

רוב אתרי הייצור להשתמש minification Javascript אבל הדרך מושגת משתנה מאוד. החל ממירים מקוונים פשוטים ועד כלי GUI מקיפים יותר לממשקי שורת פקודה, האפשרויות שלנו מגוונות למדי. במאמר זה נסתכל על איך עובד, איך אנחנו יכולים לבנות את זה לתוך העבודה שלנו ומה היתרונות והחסרונות של minifying הם.

איך עובד מיניפיקציה

הדרך הטובה ביותר ללמוד מה קורה כאשר אתה מזער את הקוד שלך היא להעיף מבט במאגר UglifyJS Github. סקריפט זה משמש ממירים מקוונים רבים, כמו גם כלי GUI וכלים שורת הפקודה כמו Grunt. הנה כמה מהשינויים שחלים על מנת להפוך את הקוד לקצר יותר:

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

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

 פונקציה שלום (טקסט) document.write (טקסט);

שלום ('ברוכים הבאים למאמר');

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

function hello (e) document.write (e) שלום ("ברוכים הבאים למאמר")

כלים

הכלים המשמשים להקטנת Javascript יכולים להיות מסווגים לשלוש קבוצות: כלים מקוונים, כלי GUI וכלים של שורת פקודה.

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

כלים מקוונים

javascript-minifier.com הוא כלי נחמד למראה עם ממשק API
Online YUI קומפרסור הוא כלי חזק יותר אשר משתמש מדחס YUI, עם המון אפשרויות יכולות CSS Minification גם כן
jscompress.com הוא לא מסיר סלסולים אבל זה נעשה את העבודה
jsmini.com הוא עוד אפשרות פשוטה אך שמיש לחלוטין

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

GUI כלים

קואלה הוא כלי ללא תשלום עבור LESS, SASS קומפילציה, JS מיניפיקציה ועוד
Prepros הוא יישום בין פלטפורמות בתשלום אשר נותן לך אפשרויות נוספות
Codekit הוא היישום שלי של בחירה. הוא שילם Mac בלבד היישום המציע קוד הידור, מיניפיקציה, שרת התצוגה המקדימה, ניהול חבילת באואר, ועוד הרבה יותר
AjaxminGui הוא כלי חינם, חד-פעמי של Windows להקטנת ה- JS שלך
UltraMinifier הוא אפליקציה חופשית עבור OS X אשר מפחית CSS ו- JS עם גרור ושחרר
קטן יותר הוא OS X כלי אשר מצמצם ו concatenates קבצים בשבילך

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

כלי GUI גדולים יותר (Prepros, קואלה, Codekit) נהדרים בניהול פרויקטים ומעניקים לך אפשרויות נוספות לדחיסה, אך הם עושים זאת צריך קצת ההתקנה. JS מהירה Minification ייקח בערך 20 שניות של ההתקנה וזה הרבה, לעומת 2 השני של תהליך מקוון או פשוט GUI כלים.

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

כלי שורת הפקודה

צמצום הוא מי שרוצה להקטין את JS משורת הפקודה, אבל לא רוצה להגדיר שום דבר מהודר בגרון או בלגימה
Uglify.js אשר הזכרנו בעבר זמין גם בתור עצמאי שורת הפקודה הכלי
Grunt יש הרחבה עבור Minification Javascript בשם grunt-contrib-uglify
לגימה יש גם הגבלת JS באמצעות Uglify.js דרך לגמוע-להכשיל

כלי שורת הפקודה הם לא רק עבור Geeks לינוקס! אני לא נהדר על הטרמינל אבל הגדרת דברים כמו Grunt ו Gulp קל דרך תיעוד גדול שלהם. הפוך של כלי שורת הפקודה היא כמות עצומה של גמישות יש לך אפשרויות פלט.

מצד שני, יש ביט של עקומת למידה. מתרגל לשורת הפקודה לוקח קצת (לא הרבה) בפועל אשר תמצא מגבילה לפני שתתחיל ליהנות מהיתרונות.

סקירה כללית

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

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

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