java-script:minification-uglification
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
java-script:minification-uglification [2023/08/09 19:31] – odefta | java-script:minification-uglification [2023/08/09 19:53] (current) – odefta | ||
---|---|---|---|
Line 7: | Line 7: | ||
Minification is the practice of removing all unnecessary characters from code without changing its functionality. \\ This includes removing all unnecessary whitespace, newlines, comments, etc. | Minification is the practice of removing all unnecessary characters from code without changing its functionality. \\ This includes removing all unnecessary whitespace, newlines, comments, etc. | ||
- | [[https:// | + | [[https:// |
+ | Here's an example of how you could use it: \\ | ||
+ | Install it: | ||
+ | < | ||
+ | npm install terser -g | ||
+ | </ | ||
+ | |||
+ | Minify a file: | ||
+ | < | ||
+ | terser file.js -o file.min.js | ||
+ | </ | ||
+ | |||
+ | ===== Uglification ===== | ||
+ | |||
+ | Uglification is a more **extreme form of minification** that can also mangle variable names, making the code harder to read and understand. This can have some small additional benefits in terms of file size and can make reverse-engineering your code a little more challenging. | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | Install it: | ||
+ | < | ||
+ | npm install uglify-js -g | ||
+ | </ | ||
+ | |||
+ | Uglify a file using both **compression (-c)** and name **mangling (-m)**: | ||
+ | < | ||
+ | uglifyjs file.js -o file.min.js -c -m | ||
+ | </ | ||
+ | |||
+ | ===== Using both minification and uglification for a file ===== | ||
+ | |||
+ | We can use both Terser and UglifyJS to minify a JavaScript file, but not simultaneously on the same command line. They are separate tools that achieve similar purposes but may have slight differences in the way they handle the minification process. \\ | ||
+ | |||
+ | Using both tools independently: | ||
+ | Terser for minification: | ||
+ | < | ||
+ | terser file.js -o file.terser.js | ||
+ | </ | ||
+ | Then uglification: | ||
+ | < | ||
+ | uglifyjs file.terser.js -o file.uglify.js -c -m | ||
+ | </ | ||
+ | |||
+ | <note top> | ||
+ | Terser is a more recent tool and is often recommended for modern JavaScript, as it supports newer syntax features that UglifyJS might not handle. | ||
+ | </ | ||
+ | |||
+ | <note tip> | ||
+ | Most modern web development workflows incorporate these processes into a build system like **[[https:// | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
java-script/minification-uglification.1691598671.txt.gz · Last modified: 2023/08/09 19:31 by odefta