Apologies in advance for my beginner question, but I haven't been able to find a thorough explanation on this topic. I recently developed a web app using React and utilized an NPM plugin to generate standard and Gzip compressed versions of the main.js and main.css files. The original size of main.js was 1.2 Mb, but with Gzip compression, it reduced to around 331Kb.
Now, within my "dist" folder, I have:
- Index.html (which loads the standard - uncompressed - main.js and main.css by default)
- main.js
- main.css
- main.js.gz
- main.css.gz
So, what should be my next steps?
Initially, my assumption was that I had to upload all these files to my server and update the Index.html to load the .gz files instead of the standard ones. However, upon doing so, I encountered an error stating "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/x-gzip"
To my surprise, when inspecting the Network tab in Chrome's developer console, I noticed in the response header of Main.js: "Content encoding: gzip", and its size is 343Kb. While this size is not exactly matching "my" compressed file, it's quite close.
Therefore, my main question: What's happening here? Is my server automatically generating gzipped versions of my .js and .css files (it certainly seems like it...)? If so, where are these versions stored? Are they created on-the-fly each time someone requests them? And if that's the case, why create gzipped versions of the Main.js and Main.css files? How should I proceed with them?
I appreciate any assistance in clarifying these queries for me!