Introduction to Uglify-JS

Uglify-JS is a widely-used JavaScript toolkit that supports the parsing, minification, and compression of JavaScript code. It provides an extensive set of APIs that allow developers to optimize their JavaScript code for both performance and size. In this blog post, we will explore various APIs offered by Uglify-JS and provide practical examples to help you get started.

Installation

 npm install uglify-js --save-dev 

Basic Usage

The simplest way to minify a JavaScript file using Uglify-JS is through the command line:

 npx uglify-js example.js -o example.min.js 

Using the `minify` API

The `minify` function is the core API for code compression:

 const UglifyJS = require("uglify-js");
const code = {
  "file1.js": "function add(a, b) { return a + b; }",
  "file2.js": "console.log(add(1, 2));"
};
const options = {
  mangle: true,
  compress: true,
};
const result = UglifyJS.minify(code, options); console.log(result.code); 

API for Symbol Mangling

Customize symbol mangling with the `mangle` API:

 const result = UglifyJS.minify(code, {
  mangle: {
    toplevel: true,
  },
});
console.log(result.code); 

API for Tree Shaking

Remove unused code with the tree shaking feature using the `compress` API:

 const code = "function foo() { var u = 2; } console.log('Test');"; const result = UglifyJS.minify(code, {
  compress: {
    dead_code: true
  }
});
console.log(result.code); 

API for Custom Parser and Compressor

Custom Parsers can be used with the `parse` and `compress` APIs:

 const ast = UglifyJS.parse("function add(a, b) { return a + b; }"); const compressed_ast = UglifyJS.Compressor().compress(ast);
console.log(compressed_ast.print_to_string()); 

Example: Uglify-JS in a Web Application

Below is an example of how to use the introduced Uglify-JS APIs in a simple Node.js web application:

 const express = require("express"); const UglifyJS = require("uglify-js");
const app = express();
app.get("/", (req, res) => {
  const code = "function greet() { console.log('Hello, World!'); } greet();";
  const result = UglifyJS.minify(code, { compress: true, mangle: true });

  res.send(`
    
      
        
      
      
        
      
    
  `);
});
app.listen(3000, () => {
  console.log("Server running on port 3000");
}); 

In this example, we define a simple Node.js server using the Express framework. The server minifies the JavaScript code input and serves it in an HTML template.

Happy coding with Uglify-JS!

Hash: 978bf2e49016c94f93dca60c224da5c24ad2ee65eb43e465517f0c44835c4e88