Как минимизировать индекс. html файл с сотнями скриптов?

Question

Я только что присоединился к существующему проекту, который использует vanilla JS, и я пытаюсь минимизировать наш исходный код. К сожалению, в индексе нет ссылок на файлы javascript. js, (Все переменные являются глобальными из-за внешних сценариев, объявленных в индексе. html file ..), поэтому такие решения, как WebPack, не работают .

Существует ли решение, которое может анализировать все внешние теги сценария в индексе. html, чтобы минимизировать его в отдельный отдельный файл js?

Answer 1

Если это одностраничное приложение со всеми сценариями, синхронно связанными в файле HTML (без модулей и тому подобного), это должно быть довольно просто

Добавить это в конце html файл поможет вам извлечь контент в хорошем порядке выполнения:

(async () => {

  // get the scripts contents
  var scripts = await Promise.all(
    Array.from( document.querySelectorAll("script") )
    .map( x => x.src )
    .map( x => fetch(x).then( x => x.text()))
  )

  // package them into one Blob
  var blob = new Blob(
    [scripts.join("\n\n")], 
    {type: "text/plain"}
  );

  // send it to a server script
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  xhr.onload = () => console.log("sent");
  xhr.send(blob);

})();

Тогда вы уменьшите / уменьшите его с помощью любого инструмента по вашему выбору.