How to Set Up Minification

minification.md

In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.

Here's one way to set it up:

1. Install Node.js
2. Run npm init -y in your project folder (don't skip this step!)
3. Run npm install terser

Now, to minify a file called like_button.js, run in the terminal:

npx terser -c -m -o like_button.min.js -- like_button.js

This will produce a file called like_button.min.js with the minified code in the same directory. If you're typing this often, you can create an npm script to give this command a name.

Which is better with React as filename, like-button.js or like_button.js?

In tutorial, like-button.js is introduced. On the other hand, in this minification.md, like_button.js is used.

I'm not good JS programmer, so I'll be glad to know the best file naming rule with React by this question.

Thank you in advance.

I found the style-guide by Google on filename. I got it that no matter which _ or - is used. But I think the filename(s) should be the unified in this gist and React docs. I'll send feedback to reactjs/react.dev#3308 .

this is nice .. very nice . .we learn daily

What is meant by minification? And why we need it?

Minification is the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This could be whitespace, unnecessary lines of code, unnecessary semi-colons, and shorter variable names and functions.

we need it because it may slow down the page for your users which you wouldn't like .

Awesome! Thanks for this!!

Very useful. Thanks

I tried it on css and it errors on @ chars

Parse error at css/style.css:9,0
@font-face {
^
ERROR: Unexpected character '@'