Skip to content

Instantly share code, notes, and snippets.

@gaearon
Last active March 4, 2024 12:45
Star You must be signed in to star a gist
Save gaearon/42a2ffa41b8319948f9be4076286e1f3 to your computer and use it in GitHub Desktop.
How to Set Up Minification

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.

@SoNuPandey22
Copy link

Awesome, Thank you!

@MonkeyTiger
Copy link

Awesome, It is very useful

@Darshil580
Copy link

thank you its useful

@ssarhangi
Copy link

Very useful. Thanks

@newcanopies
Copy link

newcanopies commented Apr 12, 2021

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)

@vlad0209
Copy link

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.

@A-Prathamesh1
Copy link

thanks ! it did remove all the spaces !

@vidalordonezhn
Copy link

Awesome, Thank you!

@wkylin
Copy link

wkylin commented Nov 12, 2021

Thanks

@developmentwebru
Copy link

Thanks a lot

@azegara
Copy link

azegara commented Nov 20, 2021 via email

@KSGitUser
Copy link

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.

@lt-xu
Copy link

lt-xu commented Feb 4, 2022

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

@DanyRenaudier
Copy link

Are you god? Thanks a lot!

@DanyRenaudier
Copy link

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

@lackatacker
Copy link

Thanks!

@MOONCOM
Copy link

MOONCOM commented Apr 25, 2022

666

@hyunjiyoo
Copy link

Thanks :)

@HduSy
Copy link

HduSy commented Jun 1, 2022

nice

@starwolf0320
Copy link

very good!

@AlucardSanin
Copy link

AlucardSanin commented Sep 5, 2022

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.

@belsayed
Copy link

Thanks!

@starwolf0320
Copy link

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

@neko314
Copy link

neko314 commented Sep 26, 2022

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.

@neko314
Copy link

neko314 commented Sep 29, 2022

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 .

@JyteCeo
Copy link

JyteCeo commented Dec 10, 2022

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

@JyteCeo
Copy link

JyteCeo commented Dec 10, 2022

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 .

@iam-shreyasthana
Copy link

Awesome! Thanks for this!!

@abduljaleel-alwli
Copy link

Very useful. Thanks

@aero012
Copy link

aero012 commented Jul 19, 2023

I tried it on css and it errors on @ chars

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment