Is there a way to minify all my js/css files while rendering to the browser but not while editing it in the IDE?

Question

My js file has a lot of comments and spaces which increases its size and slows down the website. So I am looking for a way to minify all that when I start the server but I should be able to edit it with my original file. Basically the browser sees the minified version when we 'view page source' but I should be able to see the commented version in my IDE. Is there any npm package or any way we can do that?

Answer 1

This is usually done with a build tool such as parcel or webpack (there are many others).

Parcel is maybe the simplest to setup, because the most important features - including minifying - are built in, or are configured automatically, however it may depend on how you have organized your project. In the best case you just need to install it

npm install --save-dev parcel

and then you can create a production build with

parcel build index.html

(if index.html is your main file).