پرش به محتوا
🛠️
Whiz Tools

مینیفایر جاوااسکریپت - بهینه‌ساز رایگان کد JS

ابزار رایگان مینیفایر جاوااسکریپت برای کاهش حجم کد با حذف فاصله‌های خالی و نظرات. بهینه‌سازی فایل‌های JS در لحظه بدون نیاز به نصب.

مینیفایر جاوا اسکریپت

درباره این ابزار

این مینیفایر ساده جاوا اسکریپت فاصله‌های اضافی و توضیحات را حذف می‌کند تا اندازه کد شما را کاهش دهد. عملکرد کد را حفظ می‌کند و آن را فشرده‌تر می‌سازد.

  • حذف فاصله‌های اضافی (فاصله‌ها، تب‌ها، خطوط جدید)
  • حذف توضیحات (تک خطی و چند خطی)
  • حفظ رشته‌های متنی و عبارات منظم
  • حفظ عملکرد کد
ماشین حساب بارگذاری...
📚

مستندات

مینیفایر جاوااسکریپت چیست؟

مینیفایر جاوااسکریپت ابزاری است که با حذف نویسه‌هایی که مرورگر برای اجرای کد به آن‌ها نیاز ندارد، کد منبع جاوااسکریپت را کوچک می‌کند؛ مانند فاصله‌های اضافی، شکست‌های خط و توضیحات. کد پس از مینیفای شدن دقیقاً همان کار را انجام می‌دهد. فقط اندازهٔ فایل تغییر می‌کند.

فایل‌های کوچک‌تر جاوااسکریپت سریع‌تر بارگیری و اجرا می‌شوند؛ بنابراین مینیفای کردن، پیش از انتشار وب‌سایت، مرحله‌ای رایج است.

مینیفای کردن جاوااسکریپت چگونه کار می‌کند؟

این ابزار کد را نویسه‌به‌نویسه می‌خواند و دوباره می‌سازد و هر چیزی را که خوانندگان به آن نیاز دارند اما موتور جاوااسکریپت به آن نیاز ندارد، حذف می‌کند. موارد زیر حذف می‌شوند:

  • توضیحات، شامل توضیحات // single-line تک‌خطی و توضیحات /* multi-line */ چندخطی، از جمله توضیحات به سبک JSDoc.
  • فاصله‌های اضافی، نویسه‌های تب و خطوط خالی که فقط برای خواناتر شدن کد وجود دارند.

هیچ چیز دیگری اضافه یا حذف نمی‌شود. این ابزار هرگز نقطه‌ویرگول، پرانتز یا هیچ نویسهٔ دیگری را که از قبل در کد بوده حذف نمی‌کند و نشانه‌گذاری جدیدی هم درج نمی‌کند. چند مورد نیز بدون تغییر باقی می‌مانند:

  • متن داخل رشته‌ها ("like this"، 'like this') و لفظ‌های قالبی (`like this`)، حتی اگر آن متن شامل فاصله باشد یا شبیه توضیح به نظر برسد.
  • لفظ‌های عبارت منظم، مانند /[a-z]+/g، همراه با همهٔ پرچم‌هایشان: d، g، i، m، s، u، v و y.
  • هر نقطه‌ویرگول، ویرگول و کروشه‌ای که کد اصلی از قبل داشته است.

گاهی فاصلهٔ بین دو نشانه را نمی‌توان بدون تغییر معنای آن‌ها حذف کرد. return a نمی‌تواند به returna تبدیل شود، چون در آن صورت به شکل یک واژهٔ واحد خوانده می‌شود. همین موضوع دربارهٔ نام‌هایی که با حروف خارج از الفبای انگلیسی نوشته شده‌اند نیز صدق می‌کند؛ بنابراین typeof π فاصلهٔ خود را حفظ می‌کند. هرگاه حذف فاصله باعث چسبیدن دو نشانه به هم شود، ابزار یک فاصلهٔ واحد را نگه می‌دارد.

شکست خط نیز ممکن است اهمیت داشته باشد. جاوااسکریپت گاهی در پایان خط به‌طور خودکار نقطه‌ویرگول درج می‌کند؛ این قاعده «درج خودکار نقطه‌ویرگول» نام دارد. اگر حذف شکست خط بتواند این قاعده را فعال یا مسدود کند، یا اگر شکست خط پس از یک آکولاد بستهٔ } بیاید، ابزار یک خط جدید واحد را در آنجا نگه می‌دارد. به همین دلیل کد مینیفای‌شده همیشه در یک خط فشرده نمی‌شود: برخی شکست‌های خط معنای کد را تغییر می‌دهند و باید باقی بمانند.

چگونه از این مینیفایر جاوااسکریپت استفاده کنیم؟

  1. کد جاوااسکریپت را در کادر ورودی جای‌گذاری کنید.
  2. گزینهٔ «Minify» را انتخاب کنید.
  3. نتیجه را در کادر خروجی، همراه با اندازهٔ اصلی، اندازهٔ مینیفای‌شده و درصد کاهش، بخوانید.
  4. برای کپی کردن کد مینیفای‌شده، گزینهٔ «Copy» را انتخاب کنید.

مینیفای کردن در همان زبانهٔ مرورگر اجرا می‌شود؛ بنابراین کد برای پردازش به جایی بارگذاری نمی‌شود. این ابزار همچنین کد جای‌گذاری‌شده را در نشانی صفحه کپی می‌کند تا نشانک‌گذاری یا اشتراک‌گذاری نتیجه آسان باشد. بنابراین هر کسی که بتواند آن نشانی را ببیند، می‌تواند کد را نیز ببیند.

مثال: مینیفای کردن یک تابع

پیش از مینیفای کردن:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

پس از مینیفای کردن:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

هر سه توضیح ناپدید می‌شوند و تورفتگی از بین می‌رود. نقطه‌ویرگول پس از a+b باقی می‌ماند، زیرا ابزار هرگز نقطه‌ویرگولی را که از قبل وجود داشته حذف نمی‌کند. شکست خط پیش از const نیز باقی می‌ماند، زیرا پس از یک آکولاد بستهٔ } آمده است.

مثال: مینیفای کردن یک کلاس

پیش از مینیفای کردن:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

پس از مینیفای کردن:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

توجه کنید که پیش از هر متد و پیش از آکولاد بستهٔ کلاس } یک شکست خط باقی می‌ماند. هر یک از این شکست‌ها در کد اصلی پس از یک آکولاد بستهٔ } آمده است؛ بنابراین قاعدهٔ محافظ درج خودکار نقطه‌ویرگول آن‌ها را حفظ می‌کند. نقطه‌ویرگول‌های داخل هر متد نیز باقی می‌مانند.

فرمول کاهش اندازه

ابزار سه عدد را زیر کادر خروجی گزارش می‌کند: اندازهٔ اصلی، اندازهٔ مینیفای‌شده و میزان کاهش. همهٔ اندازه‌ها تعداد نویسه‌ها هستند، نه بایت‌ها. میزان کاهش به‌صورت درصدی است که به نزدیک‌ترین عدد صحیح گرد می‌شود:

1reduction = round((1 - minified characters / original characters) x 100)
2

مثال تابع بالا پیش از مینیفای شدن ۲۱۳ نویسه و پس از آن ۱۰۳ نویسه دارد. در نتیجه، نسبت ۱–۱۰۳ به ۲۱۳ برابر با ۰٫۵۱۶۴ است که برابر با ۵۱٫۶۴٪ می‌شود و ابزار ۵۲٪ را نمایش می‌دهد. مثال کلاس از ۵۱۵ نویسه به ۳۰۴ نویسه کاهش می‌یابد که برابر با ۴۰٫۹۷٪ است و به‌صورت ۴۱٪ نمایش داده می‌شود.

محدودیت‌های این مینیفایر

این ابزار فقط توضیحات و فاصله‌های سفید را حذف می‌کند. برخلاف ابزارهای مرحلهٔ ساخت مانند Terser یا UglifyJS، نام متغیرها را تغییر نمی‌دهد، کدهای استفاده‌نشده را حذف نمی‌کند و فایل‌ها را با هم ترکیب نمی‌کند. این ابزارها معمولاً خروجی کوچک‌تری تولید می‌کنند، اما برای اجرا به فرایند ساخت نیاز دارند. این ابزار بدون نیاز به آماده‌سازی، فوراً در مرورگر کار می‌کند و برای بررسی‌های سریع یا قطعه‌کدهای کوچک مناسب است، نه برای یک خط لولهٔ کامل تولید.

پرسش‌های متداول

مینیفایر جاوااسکریپت چه چیزهایی را حذف می‌کند؟

توضیحات و فاصله‌های سفیدی را که برای اجرای کد لازم نیستند حذف می‌کند. نقطه‌ویرگول‌ها، کروشه‌ها یا هیچ نویسهٔ دیگری را که از قبل بخشی از کد بوده حذف نمی‌کند.

آیا مینیفای کردن جاوااسکریپت نحوهٔ اجرای آن را تغییر می‌دهد؟

خیر. کد مینیفای‌شده باید همان نتایج کد اصلی را تولید کند. فقط قالب‌بندی تغییر می‌کند.

چرا کد مینیفای‌شده گاهی هنوز شکست خط دارد؟

شکست خط ممکن است طبق قاعدهٔ درج خودکار نقطه‌ویرگول جاوااسکریپت لازم باشد یا پس از یک آکولاد بستهٔ } بیاید. حذف آن می‌تواند عملکرد کد را تغییر دهد؛ بنابراین ابزار در این نقاط به‌جای حذف کردن، یک خط جدید واحد را نگه می‌دارد.

آیا مینیفای کردن همان فشرده‌سازی است؟

خیر. مینیفای کردن نویسه‌ها را از خود کد منبع حذف می‌کند. فشرده‌سازی، مانند gzip یا Brotli، فایل را برای انتقال از طریق شبکه به شکل دیگری کدگذاری می‌کند. وب‌سایت‌ها معمولاً از هر دو روش در کنار هم استفاده می‌کنند.

آیا کد من به سرور ارسال می‌شود؟

خود مینیفایر کاملاً در زبانهٔ مرورگر اجرا می‌شود و کد برای مینیفای شدن بارگذاری نمی‌شود. کد جای‌گذاری‌شده در نشانی صفحه ذخیره می‌شود تا نتیجه قابل اشتراک‌گذاری یا نشانک‌گذاری باشد؛ بنابراین در نوار نشانی مرورگر و سابقهٔ آن نمایش داده می‌شود.

آیا می‌توان کد مینیفای‌شده را به کد اصلی برگرداند؟

قالب‌بندی کد می‌تواند فاصله‌های سفید را بازگرداند، اما توضیحات و نام‌های اصلی متغیرها و توابع از بین رفته‌اند؛ مگر اینکه نقشهٔ منبع جداگانه‌ای ذخیره شده باشد.

منابع

  1. MDN Web Docs. "Minification." واژه‌نامهٔ MDN، https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," بخش ۱۲٫۱۰، "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," بخش 12.7.1، "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," بخش 22.2.6، "Properties of the RegExp Prototype Object" (مجموعهٔ پرچم‌های d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object