How to minify index.html file with hundreds of scripts?

Question

I just joined an existing project that uses vanilla JS and I am trying to minify our source code. Unfortunately, there is no reference to the javascript files within the index.js, (All variables are global due to external scripts declared in the index.html file..), so solutions such as WebPack do not work.

Is there a solution out there that can parse through all of the external script tags in the index.html to minify it into a single separate js file?

Do you only have external libraries or do you also have inline JS? How many <script> tags are we talking about? Because for maybe 10 you are better off by hand. I'm not sure if such tool exists but it will be cool to make. — A1rPun
– A1rPun, Commented Jan 6, 2020 at 21:49
Why exactly can't you use Webpack to do that? You could define each external script as a separate entry. And if not, you could still bundle all the script into one and then have your own strategy of Code Splitting — syntagma
– syntagma, Commented Jan 6, 2020 at 21:59
There are hundreds of separate external and inline entries. I was hoping there would be a tool available to simply parse through all of them, bundle & minify. — Jake Caron
– Jake Caron, Commented Jan 6, 2020 at 22:59
Hundreds is not a simple task indeed. Is it across multiple files with the same references for example a jQuery CDN? — A1rPun
– A1rPun, Commented Jan 6, 2020 at 23:21

geoffrey · Accepted Answer · 2020-01-06 23:41:39Z

4

If it is a single page application with every scripts linked synchronously in the HTML file (no modules and stuff like that), it should be quite simple

Adding this at the end of the html file would help you retrieve the content in the good execution order:

(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);

})();

Then you would minify/uglify with any tool of your choosing.

answered Jan 6, 2020 at 23:41

geoffrey

2,51412 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A1rPun Over a year ago

Pretty clever but what about inline scripts?

geoffrey Over a year ago

A naive approach would be to use x.childNodes[0].textContent instead of x.src but I can't guarantee that it is going to work well with, for example, comments. I don't know if treating the content of a script tag as a text node is part of any specification. You should run some tests on dummy scripts first and have some way to test the compliance of the application after the minification.

geoffrey Over a year ago

I just tested the textContent thing. It seems to work just fine with multiline scripts in Firefox. with a little refactoring you can fallback to the textContent hack when the script tag does not have a src attribute. One way to make sure the hack is safe to use would be to copy and paste a library into script tags (with comments and all), run the snippet and then compare the output with the original library file by the means of your IDE, git or some other tool. if the two files are identical you are good to go.

Collectives™ on Stack Overflow

How to minify index.html file with hundreds of scripts?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related