JetBrains Rider
 
Get JetBrains Rider
Get your hands on the new features ahead of the release by joining the Early Access Program for Rider 2025.1! Learn more

Minifying JavaScript

Last modified: 16 January 2025

Minification or compression means removing all unnecessary characters, such as spaces, new lines, comments, without changing the functionality of the source code. During development and debugging, these characters make code easier to read. At the production stage, they only increase the size of code to be transferred.

Most often compression is done as a step in your build process, with build tools like webpack. If you're not using build tools, you can use a stand-alone tool, such as terser.

To minify your code automatically, you need to install a minification tool and configure a File Watcher which will track changes to your files and run the minification tool.

By default, minification starts as soon as a JavaScript file in the File Watcher's scope is changed and saved. You can specify other events that invoke the tool. Learn more from File Watchers.

The generated minified code is stored in a separate file with the name of the source JavaScript file and the extension min.js. The location of this generated file is defined in the Output paths to refresh field of the New Watcher dialog. However, in the Project Tree, the file with the minified code is shown under the source JavaScript file which is displayed as a node. To change this default presentation, configure file nesting in the Explorer tool window CtrlAlt0L.

The example below shows how you can use terser to minify your JavaScript code right from JetBrains Rider.