Статьи

Как создать свой собственный JavaScript-компрессор с PHP и компилятором Closure

Март 22, 2019

В моем предыдущем посте я обсуждал REST API Closure Compiler . В этой статье мы разработаем небольшую PHP-программу, которая покажет, как можно использовать API для сжатия кода JavaScript, когда вам это нужно.

Зачем писать свою собственную систему?

Вы обнаружите, что несколько бесплатных инструментов справляются с этой задачей; Один из первых PHP JavaScript-компрессоров был написан Эдом Элиотом . Однако иногда им требуются технологии, которые вы не используете, такие как Java, или они могут не обслуживать внутренние процессы рабочих процессов, включая:

  • распространение несжатого JavaScript на ПК разработчиков
  • интеграция с системами контроля версий
  • автоматизировать сборку и т. д.
Важно: это не код производственного уровня!

Код ниже реализует элементарный JavaScript-компрессор в PHP для иллюстрации основ. Код вызывает API сжатия Closure Compiler каждый раз, когда делается запрос, поэтому он, вероятно, будет медленнее, чем несколько несжатых файлов JavaScript. Вы должны добавить свои собственные функции для обработки кэширования в файл или базу данных.

HTML

Предположим, вы обычно добавляете следующие теги script 

 <script src="script/file1.js"></script><script src="script/file2.js"></script><script src="script/file3.js"></script>

Мы заменим этот блок одним script
.js 

 <script src="script/?file1&file2&file3"></script>

PHP

Теперь нам требуется index.php файл в нашей папке script Первый блок кода преобразует параметры GET 

 <?php// fetch JavaScript files to compress$jsfiles = array_keys($_GET);$js = '';		// code to compress$jscomp = '';	        // compressed JS$err = '';	        // error string

Теперь мы перебираем JS-файлы, читаем содержимое и добавляем его в строку $ js. Если файл не может быть найден или прочитан, его имя добавляется в строку $ err: 

 // fetch JavaScript filesfor ($i = 0, $j = count($jsfiles); $i < $j; $i++) {  $fn = $jsfiles[$i] . '.js';  $jscode = @file_get_contents($fn);  if ($jscode !== false) {    $js .= $jscode . "n";  }  else {    $err .= $fn . '; ';  }}

Если какие-либо файлы отсутствуют, мы можем сгенерировать предупреждение JavaScript, чтобы сообщить разработчику: 

 if ($err != '') {  // error: missing files  $jscomp = "alert('The following JavaScript files could not be read:\n$err');";}

Если ошибок нет и у нас есть некоторый код JavaScript, мы можем продолжить сжатие. Массив $apiArgsпараметров API Closure Compiler — вы можете добавлять, удалять или изменять их по мере необходимости. Аргументы кодируются и добавляются в строку $args 

 else if ($js != '') {  // REST API arguments  $apiArgs = array(    'compilation_level'=>'ADVANCED_OPTIMIZATIONS',    'output_format' => 'text',    'output_info' => 'compiled_code'   );   $args = 'js_code=' . urlencode($js);   foreach ($apiArgs as $key => $value) {     $args .= '&' . $key .'='. urlencode($value);   }

Теперь мы можем вызвать API-интерфейс компилятора Closure, используя библиотеку PHP cURL . Сжатый JavaScript возвращается в строку $jscomp 

   // API call using cURL  $call = curl_init();  curl_setopt_array($call, array(    CURLOPT_URL => 'http://closure-compiler.appspot.com/compile',    CURLOPT_POST => 1,    CURLOPT_POSTFIELDS => $args,    CURLOPT_RETURNTRANSFER => 1,    CURLOPT_HEADER => 0,    CURLOPT_FOLLOWLOCATION => 0  ));  $jscomp = curl_exec($call);  curl_close($call);

Наконец, мы возвращаем наш сжатый код в браузер с соответствующим типом MIME: 

 }// output content header('Content-type: text/javascript'); echo $jscomp; ?>

Скачать код

Сохраните немного ввода и загрузите пример кода . Он включает небольшую библиотеку JavaScript, уменьшенную до трети своего первоначального размера, и требует меньше HTTP-запросов.

К вам …

Теперь вы можете адаптировать этот базовый код для реализации таких функций, как:

  • Обработка ошибок — Ваш код должен проверять сбои вызовов API или проблемы со сжатием, о которых сообщает Closure Compiler.
  • Кэширование. Если у вас есть сжатый код, вы можете сохранить его в файл, поэтому нет необходимости повторно вызывать API. Вы можете сравнить даты создания, чтобы проверить, изменился ли файл JavaScript с момента его последнего кэширования.
  • Кэширование в браузере — заголовки истечения HTTP могут быть установлены так, чтобы сжатые файлы JavaScript кэшировались браузером на неопределенный срок. Вы можете добавить аргумент «последнее обновление» к URL-адресу тега script
  • Отчеты по коду JavaScript — API-интерфейс Closure Compiler может использоваться для выделения проблем, о которых не сообщалось анализаторам браузера; например, неиспользуемые переменные или запятая после последнего элемента в массиве.
  • Процессы сборки — ваша система может распространять несжатый код JavaScript разработчику и сжатый код всем остальным.

Я надеюсь, что вы найдете это полезным. Будете ли вы использовать API Closure Compiler для автоматизации процессов сжатия JavaScript? Ответьте через ссылку на запись в блоге ниже.

38
Share: