מכווץ JavaScript (JS Minifier)

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

רץ בדפדפן שלכםבלי הרשמהשום דבר לא מועלה

פלט מכווץ

איך משתמשים בכלי מכווץ JavaScript

  1. הדביקו את ה-JavaScript שלכם או פתחו קובץ .js.
  2. בחרו אפשרויות: קיצור שמות מקצר משתנים מקומיים, דחיסה משכתבת את הקוד לגרסה שקולה וקטנה יותר, ES module מאפשר import/export ברמה העליונה.
  3. בחרו את יעד ה-ECMAScript שהדפדפנים של המשתמשים שלכם תומכים בו. ES2020 בטוח לכל הדפדפנים המתעדכנים.
  4. בדקו את הגודל, החיסכון והערכת ה-gzip שמתחת לפלט.
  5. העתיקו את הקוד המכווץ או הורידו אותו כ-output.min.js.

מה עושה מכווץ JavaScript?

כיווץ מקטין את ה-JavaScript בלי לשנות את מה שהוא עושה. הכלי משתמש ב-Terser, המכווץ שעומד מאחורי webpack,‏ Vite ו-Rollup, ומבצע שלושה סוגי שינויים:

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

כיווץ לעומת gzip: האם צריך את שניהם?

כן. Gzip ו-Brotli דוחסים תבניות בתים חוזרות בזמן ההעברה, ואילו כיווץ מסיר בתים שהדפדפן היה צריך להוריד, לנתח ולקמפל. סקריפט טיפוסי קטן ב-40–60% מהכיווץ, ואז בעוד 60–70% מ-gzip. גודל ה-gzip שמוצג כאן הוא הערכה טובה למה שהשרת שלכם ישלח בפועל.

שמירת הערות רישיון

רישיונות קוד פתוח רבים (MIT,‏ BSD,‏ Apache) דורשים שהודעת זכויות היוצרים תישאר עם הקוד. לפי המוסכמה, הערות שמתחילות ב-/*! או מכילות @license או @preserve נשמרות כאשר שמירת הערות רישיון מופעלת.

מתי לא לכווץ ידנית

אם הפרויקט שלכם כבר משתמש ב-bundler, תנו לו לכווץ את ה-builds לפרודקשן ולייצר source maps לדיבאג. מכווץ אונליין אידיאלי לסקריפטים חד-פעמיים, לקטעי קוד ל-CMS או ל-tag manager, ל-bookmarklets ולבדיקה כמה קטן קטע קוד יכול להיות.

שאלות נפוצות

האם הקוד שלי מועלה לשרת?
לא. Terser רץ בתוך לשונית הדפדפן שלכם, כך שקוד קנייני לעולם לא יוצא מהמחשב.
האם כיווץ יכול לשבור את הקוד שלי?
Terser מבצע רק טרנספורמציות ששומרות על התנהגות זהה עבור JavaScript תקין. קוד שמסתמך על Function.prototype.toString() או על שמות משתנים מקומיים דרך eval עלול להיפגע; במקרה כזה כבו את קיצור שמות.
האם יש תמיכה בתחביר מודרני כמו async/await, מחלקות ו-optional chaining?
כן. Terser מנתח תחביר ES2022+. הגדרת היעד קובעת רק באיזה תחביר הפלט רשאי להשתמש; היא לא מתרגמת תכונות חדשות לגרסאות ישנות יותר.
מה ההבדל בין minify ל-uglify?
הם אותו דבר. UglifyJS היה הכלי הקלאסי; Terser הוא ה-fork המתוחזק שלו עם תמיכה מלאה ב-ES2015+.

כלים קשורים

מכווץ CSS הקטנת גיליונות סגנונות: קיצור ערכים ומיזוג כללים כפולים. מכווץ HTML הסרת הערות ורווחים, וכיווץ CSS/JS מוטמעים. מעצב JSON עיצוב, כיווץ ובדיקת JSON עם שגיאות לפי שורה ועמודה. מעצב SQL עיצוב או כיווץ SQL ל-PostgreSQL,‏ MySQL,‏ T-SQL,‏ BigQuery ועוד.