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.

Awesome, Thank you!

Awesome, It is very useful

thank you its useful

Very useful. Thanks

Thanks very much!

Sorry to comment with the following bug: (WSL2 Ubuntu 20.04 VS Code)
$ cd src && npm init -y
src\ $ ls src
roslib.js
package.json
src\ $ sudo npx terser -c -m -o roslibjs.min.js -- roslibjs.js

npx: installed 6 in 4.873s
ERROR: ENOENT: no such file or directory, open 'roslibjs.js'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at read_file (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26955:23)
    at /root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26766:41
    at Array.forEach (<anonymous>)
    at run_cli (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26765:32)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at findNodeScript.then.existing (/usr/local/lib/node_modules/npm/node_modules/libnpx/index.js:268:14)

Thanks very much!

Sorry to comment with the following bug: (WSL2 Ubuntu 20.04 VS Code)
$ cd src && npm init -y
src\ $ ls src
roslib.js
package.json
src\ $ sudo npx terser -c -m -o roslibjs.min.js -- roslibjs.js

npx: installed 6 in 4.873s
ERROR: ENOENT: no such file or directory, open 'roslibjs.js'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at read_file (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26955:23)
    at /root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26766:41
    at Array.forEach (<anonymous>)
    at run_cli (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26765:32)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at findNodeScript.then.existing (/usr/local/lib/node_modules/npm/node_modules/libnpx/index.js:268:14)

You don't have "roslibjs.js" file.

thanks ! it did remove all the spaces !

Awesome, Thank you!

Thanks

Thanks a lot

Thanks!!

…

On Sat, Nov 20, 2021 at 10:38 AM Maxim ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Thanks a lot — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/42a2ffa41b8319948f9be4076286e1f3#gistcomment-3968902>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APDOAXZJWOP4ZVMKMQVQCXTUM66F7ANCNFSM4HMBAV4A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

What for to run
3. Run npm install terser``
if you just can run

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

and npx will install and run terser and the same time

npx [options] <command>[@version] [command-arg]...

By default, npx will check whether exists in $PATH, or in the local project binaries, and execute that. If is not found, it will be installed prior to execution.

Thank you, that works.
I have a question: why use npx instead of npm in the last step?

Are you god? Thanks a lot!

@lt-xu

Thank you, that works. I have a question: why use npx instead of npm in the last step?

it’s a package runner not a package installer and that's what you need to make work the CLI.. In addition, it comes with npm 5.2+

Thanks!

666

Thanks :)

nice

very good!

Thanks very much!
Sorry to comment with the following bug: (WSL2 Ubuntu 20.04 VS Code)
$ cd src && npm init -y
src\ $ ls src
roslib.js
package.json
src\ $ sudo npx terser -c -m -o roslibjs.min.js -- roslibjs.js

npx: installed 6 in 4.873s
ERROR: ENOENT: no such file or directory, open 'roslibjs.js'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at read_file (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26955:23)
    at /root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26766:41
    at Array.forEach (<anonymous>)
    at run_cli (/root/.npm/_npx/5749/lib/node_modules/terser/dist/bundle.min.js:26765:32)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at findNodeScript.then.existing (/usr/local/lib/node_modules/npm/node_modules/libnpx/index.js:268:14)

You don't have "roslibjs.js" file.

That's because you need to have that file in your repo root folder, that's probably fixable with a different CLI because this example is intended to use in a simple web.

Thanks!

you are very excellent!
very good!
I want to meet you again!

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.

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 '@'