Что такое минификация

[Mutt]

Содержание статьи

• Что такое минификация
• Зачем уменьшать HTML, CSS и JavaScript (JS)
• Перспектива CDN

Что такое минификация
Минификация - это процесс минимизации кода и разметки на ваших веб-страницах и файлах сценариев. Это один из основных методов, используемых для сокращения времени загрузки и использования полосы пропускания на веб-сайтах. Минификация значительно повышает скорость и доступность сайта, что напрямую влияет на удобство работы пользователей. Это также полезно для пользователей, получающих доступ к вашему веб-сайту через тарифный план с ограниченным объемом данных и желающих сэкономить на использовании полосы пропускания при просмотре веб-страниц.

Зачем уменьшать HTML, CSS и JavaScript (JS)
При создании файлов HTML, CSS и JavaScript (JS) разработчики, как правило, используют интервалы, комментарии и хорошо названные переменные, чтобы код и разметка были удобочитаемыми. Это также помогает другим, кто позже может работать с активами. Хотя это плюс на этапе разработки, он становится отрицательным, когда дело доходит до обслуживания ваших страниц. Веб-серверы и браузеры могут анализировать содержимое файлов без комментариев и хорошо структурированного кода, что создает дополнительный сетевой трафик без каких-либо функциональных преимуществ.

Чтобы минимизировать файлы JS, CSS и HTML, необходимо удалить комментарии и лишние пробелы, а также обработать имена переменных, чтобы минимизировать код и уменьшить размер файла. Версия уменьшенного файла обеспечивает ту же функциональность, уменьшая пропускную способность сетевых запросов.

Вот как разработчик написал бы файл 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);

Уменьшенная версия этого примера кода на 48% меньше. В некоторых случаях минификация может уменьшить размер файла на 60%. Например, разница между исходной и минифицированной версией библиотеки JQuery JavaScript составляет 176 КБ.

Минификация стала стандартной практикой для оптимизации страниц. Все основные разработчики библиотек JavaScript (bootstrap, JQuery, AngularJS и т. Д.) Предоставляют уменьшенные версии своих файлов для производственных развертываний, обычно обозначаемые min.js расширением имени.

Перспектива CDN
Минификация - это основной компонент оптимизации внешнего интерфейса (FEO), набора инструментов и методов, которые уменьшают размер файлов и количество связанных запросов веб-страниц.

Однако выполнение минификации и управление ею может быть обременительным. Ручное минификация - плохая практика и становится практически невозможной, когда речь идет о больших файлах. Даже автоматизированные инструменты (которых много) могут оказаться сложной задачей, поскольку вам придется хранить отдельные версии файлов для разработки и производства. Синхронизировать их часто бывает обременительно.

Сеть доставки контента (CDN) обеспечивает автоматическую минификацию, избавляя вас от накладных расходов, необходимых для минимизации ваших собственных файлов. Вы храните свои исходные несжатые файлы на главном сервере, в то время как CDN автоматически сохраняет минифицированные варианты на своих кэширующих серверах и PoP, синхронизируя их с изменениями исходного кода.

Imperva CDN автоматически сжимает файлы HTML, CSS и JavaScript, хранящиеся на его серверах, чтобы ускорить загрузку страницы. Это делается без какой-либо настройки сервера на вашей стороне, и в то же время защищает вашу организацию - большую или маленькую - от основных угроз (например, DDoS-атак).