Differences

This shows you the differences between two versions of the page.

--- java-script:minification-uglification [2023/08/09 19:30] – 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.
-[[https://terser.org/]] is a popular tool for minifying modern JavaScript files. Here's an example of how you could use it:
+[[https://terser.org/|Terser]] is a popular tool for minifying modern JavaScript files. \\
+Here's an example of how you could use it: \\
+Install it:
+<code>
+npm install terser -g
+</code>
+Minify a file:
+<code>
+terser file.js -o file.min.js
+</code>
+===== 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://www.npmjs.com/package/uglify-js|Uglify]] is a popular tool for both minification and uglification. \\
+Install it:
+<code>
+npm install uglify-js -g
+</code>
+Uglify a file using both **compression (-c)** and name **mangling (-m)**:
+<code>
+uglifyjs file.js -o file.min.js -c -m
+</code>
+===== 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:
+<code>
+terser file.js -o file.terser.js
+</code>
+Then uglification:
+<code>
+uglifyjs file.terser.js -o file.uglify.js -c -m
+</code>
+<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>
+<note tip>
+Most modern web development workflows incorporate these processes into a build system like **[[https://webpack.js.org/|Webpack]] or [[https://gulpjs.com/|Gulp]]**. \\ This can automate the minification and uglification process as part of your regular development and deployment process, and may include other optimizations like tree-shaking to remove unused code.
+</note>