Minification

Minification چیست؟

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

چرا  باید ( HTML ، CSS و JavaScript JS) را به حداقل رساند؟

هنگام ایجاد پرونده های HTML ، CSS و JavaScript (JS) ، توسعه دهندگان تمایل دارند از فاصله ، نظرات و متغیرهای مشهور برای ایجاد کد و نشانه گذاری برای خودشان استفاده کنند. همچنین به دیگران که ممکن است بعداً تقیراتی انجام دهند، کمک می کند. در حالی که این یک امتیاز در مرحله توسعه است ، وقتی نوبت به ارائه صفحات شما می رسد ، امتیاز منفی محسوب می شود. سرورها و مرورگرهای وب می توانند محتوای فایل را بدون نظر و کد خوب ساختار یافته تجزیه کنند ، که هر دو بدون ایجاد هیچ گونه مزیت کاربردی باعث ایجاد ترافیک شبکه اضافی می شوند.

برای به حداقل رساندن پرونده های JS ، CSS و HTML ، نظرات و فضاهای اضافی باید حذف شود ، همچنین نام های متغیر خرد شده را به حداقل می رسانید تا کد را به حداقل برسانید و اندازه پرونده را کاهش دهید. نسخه فایل minified ضمن کاهش پهنای باند درخواست های شبکه ، عملکرد مشابهی را ارائه می دهد.

در زیر چگونگی نوشتن یک برنامه نویس برای استفاده در یک وب سایت ، نحوه ایجاد JavaScript است:

// return random number between 1 and 6
function dieToss() {
return Math.floor(Math.random() * 6) + 1;
}
// function returns a promise that succeeds if a 6 is tossed
function tossASix() {
return new RSVP.Promise(function(fulfill, reject) {
var number = Math.floor(Math.random() * 6) + 1;
if (number === 6) {
fulfill(number);
} else {
reject(number);
}
});
}
// display toss result and launch another toss
function logAndTossAgain(toss) {
console.log(“Tossed a ” + toss + “, need to try again.”);
return tossASix();
}

function logSuccess(toss) {
console.log(“Yay, managed to toss a ” + toss + “.”);
}

function logFailure(toss) {
console.log(“Tossed a ” + toss + “. Too bad, couldn’t roll a six”);
}
// use promise paradigm to try three times to toss a 6
tossASix()
.then(null, logAndTossAgain) //Roll first time
.then(null, logAndTossAgain) //Roll second time
.then(logSuccess, logFailure); //Roll third and last time

وقتی کوچک شد، کد مشابه این است:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log(“Tossed a “+a+”, need to try again.”),tossASix()}function logSuccess(a){console.log(“Yay, managed to toss a “+a+”.”)}function logFailure(a){console.log(“Tossed a “+a+”. Too bad, couldn’t roll a six”)}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

نسخه مضراب شده از این کد نمونه ۴۸٪ کوچکتر است. در برخی موارد ، کوچک سازی می تواند اندازه پرونده را تا ۶۰٪ کاهش دهد. به عنوان مثال ، یک تفاوت ۱۷۶ کیلوبایت بین نسخه اصلی و کوچک شده کتابخانه جاوا اسکریپت JQuery وجود دارد.

کوچک سازی برای بهینه سازی صفحه به یک روش استاندارد تبدیل شده است. همه توسعه دهندگان اصلی كتابخانه JavaScript (bootstrap، JQuery، AngularJS و غیره) نسخه های كاهش یافته پرونده های خود را برای استقرار تولید ارائه می كنند كه معمولاً با پسوند نام min.js مشخص می شوند.

چشم انداز CDN

Minification یکی از اجزای اصلی بهینه سازی انتهای جلویی (FEO) است ، مجموعه ای از ابزارها و تکنیک هایی که سایز پرونده ها و تعداد درخواست های صفحه وب را کاهش می دهد.

با این حال ، انجام و مدیریت کوچک سازی می تواند کار سختی باشد. کوچک سازی دستی یک روش بد است و در موارد مربوط به پرونده های بزرگ تقریباً غیرممکن می شود. حتی ابزارهای خودکار (که تعداد زیادی از آنها وجود دارد) می توانند ثابت کنند چالش برانگیز هستند ، زیرا مجبور خواهید شد نسخه های جداگانه توسعه و تولید فایل را حفظ کنید. نگه داشتن همگام سازی آنها اغلب سنگین است.

یک شبکه تحویل محتوا (CDN minification ) خودکار را فراهم می کند و شما را از نیاز برای کوچک سازی پرونده های خود رهایی می دهد. شما پرونده های اصلی و فشرده نشده خود را بر روی سرور اصلی خود نگه می دارید ، در حالی که CDN به طور خودکار انواع minified را در سرورهای حافظه پنهان خود و PoP ها ذخیره می کند – همگام سازی آنها با تغییرات منبع است.

Imperva CDN بطور خودکار فایلهای HTML ، CSS و JavaScript که در سرورهای آن ذخیره شده اند را فشرده می کند تا بار بارگذاری صفحه را تسریع کند. این کار بدون نیاز به پیکربندی سرور در انتهای شما انجام می شود ، در عین حال سازمان شما – بزرگ یا کوچک – از تهدیدات اصلی (مانند حملات DDoS) محافظت می کند.

منبع