درباره این ابزار
کوچکسازی جاوا اسکریپت با حذف کاراکترهای غیر ضروری و تغییر نام متغیرهای محلی به نامهای کوتاهتر، اندازه کد منبع را کاهش میدهد. دسته اول - فضای خالی و حذف نظرات - ساده و بدون ریسک است. دوم - تغییر نام متغیر - مستلزم درک قوانین محدوده است و همان کاری است که کوچککنندههای تولید مانند Terser و esbuild بهترین انجام را میدهند.
این ابزار بر کوچکسازی ایمن تمرکز میکند: حذف نظرات، جمعکردن فضای سفید، حذف نیمویرگولهای اضافی و کوتاه کردن الگوهای واضح. تغییر نام متغیر محافظه کارانه است - فقط متغیرهای محلی در محدوده های واضح لمس می شوند و نام های ارجاع شده خارجی به حال خود رها می شوند. نتیجه از نظر عملکردی با منبع یکسان است.
برای کوچکسازی درجه تولید، ابزارهای اختصاصی (Terser، esbuild، swc) مدل کامل دامنه ECMAScript را درک میکنند و خروجی بسیار کوچکتری تولید میکنند. این ابزار برای کوچکسازی سریع مرورگر در زمانی است که راهاندازی ساخت کامل در دسترس نیست.
چرا جاوا اسکریپت را کوچک کنیم؟
بستههای جاوا اسکریپت معمولاً بزرگترین منبع منفرد در یک صفحه وب مدرن هستند. کوچک سازی به طور معمول باعث کاهش 30 تا 60 درصدی اندازه در برابر منبع غیرمینی شده می شود. در ترکیب با gzip یا Brotli، کاهش تا حدودی کاهش مییابد، اما این ترکیب همچنان بایتهای قابل اندازهگیری را ذخیره میکند - به ویژه برای کاربرانی که اتصالات آهسته دارند.
جاوا اسکریپت سریعتر همچنین به معنای زمان تعاملی سریعتر است. اسکریپت های کوچکتر سریعتر دانلود می شوند، سریعتر تجزیه می شوند و زودتر اجرا می شوند. برای سایت هایی که TTI بر نرخ پرش و رتبه بندی سئو تاثیر می گذارد، کوچک سازی یکی از ارزان ترین بردهای موجود است.
جزئیات فنی
Minifier با استفاده از تجزیه کننده ای که به نحو ECMAScript احترام می گذارد، جاوا اسکریپت را نشانه گذاری می کند. نظرات (تک خطی و چند خطی) حذف می شوند به جز نظرات مجوز که با /* علامت گذاری شده اند! پیشوند فضای خالی به جز در مواردی که از نظر نحوی مورد نیاز است (بین شناسه ها، بعد از کلمات کلیدی) جمع می شود.
تغییر نام متغیر محافظه کارانه متغیرهای محلی را در حوزه های ساده کوتاه می کند. نامهای جهانی، صادرات و وارداتی تغییر نام داده نمیشوند - که باعث از بین رفتن ارجاعات خارجی میشود. برای تغییر نام عمیق، از Terser یا esbuild با تجزیه و تحلیل مناسب ماژول آگاه استفاده کنید.
موارد لبه: درج خودکار نقطه ویرگول (ASI) به این معنی است که کوچک کننده باید خطوط جدید را در برخی زمینه ها حفظ کند تا از تغییر رفتار برنامه جلوگیری کند. حروف الفبای الگو، حروف regex و JSX (اگر ورودی شامل آن باشد) دقیقاً به این دلیل حفظ می شوند که ممکن است محتویات آنها برای فشرده سازی ایمن نباشد.
سوالات متداول
- آیا Minification نحوه عملکرد کد من را تغییر می دهد؟
- خیر. Minification فضاهای خالی و نظرات را حذف میکند، که بر اجرا تأثیری ندارند. کوتاه کردن متغیر (منگل کردن) متغیرهای محلی را تغییر نام می دهد اما رفتار را حفظ می کند. متغیرهای جهانی و نام های صادر شده دست نخورده نگه داشته می شوند.
- آیا باید در توسعه یا تولید کوچک کنم؟
- در تولید فقط از کد کوچک شده استفاده کنید. در طول توسعه، کد اصلی قابل خواندن را نگه دارید. اکثر ابزارهای ساخت (Webpack، Vite، esbuild) به صورت خودکار به عنوان بخشی از فرآیند ساخت تولید، minification را انجام می دهند.
- تفاوت بین کوچک سازی و مبهم سازی چیست؟
- کوچکسازی اندازه را کاهش میدهد در حالی که در صورت فرمت کردن، کد را از نظر عملکردی خوانا نگه میدارد. مبهم سازی عمدا درک کد را دشوار می کند (رمزگذاری رشته، صاف کردن جریان کنترل). این ابزار بر کاهش اندازه تمرکز می کند، نه مبهم سازی.
- چقدر باید انتظار کاهش سایز داشته باشم؟
- به طور معمول 30-60٪ قبل از gzip. کدهایی که به خوبی نظر داده شده با نام متغیرهای طولانی بیشترین کاهش را دارند. همراه با فشرده سازی gzip، فایل های جاوا اسکریپت اغلب 80 تا 90 درصد کوچکتر از منبع اصلی هستند.
- آیا کد من روی سرور آپلود می شود؟
- خیر. Minifier در مرورگر شما اجرا می شود.
- جاوا اسکریپت من چقدر کوچکتر خواهد بود؟
- به طور معمول 30-60٪ کاهش می یابد. کد متغیر سنگین با شناسه های طولانی بیشتر فشرده می شود. کد express-heavy کمتر فشرده می شود.
- آیا باید با دست کوچک سازی کنم؟
- هرگز. جاوا اسکریپت قابل خواندن را در منبع حفظ کنید. Minification را به عنوان مرحله ساخت یا بخشی از استقرار اجرا کنید.
- آیا روی TypeScript کار می کند؟
- TypeScript باید ابتدا با استفاده از tsc یا esbuild در جاوا اسکریپت کامپایل شود. پس از کامپایل، جاوا اسکریپت حاصل می تواند کوچک شود.