JS Minify Compiler
A Visual Studio Code extension that minifies JavaScript and CSS files and saves .min.js / .min.css files into a configurable output directory.
Features
- Minify current JavaScript file
- Minify current CSS file
- Minify selected JavaScript or CSS into a preview editor
- Minify entire workspace
- Auto-minify on save with a status bar toggle
- Configurable output directory
- Optional folder structure preservation
- Output collision detection before workspace minification
- File size savings summary after minification
- Optional source maps
- Explorer and editor context menu commands
- Quick commands for output folder, source maps, and mangle settings
- Uses Terser for JavaScript and clean-css for CSS
Configuration
Example .vscode/settings.json:
{
"jsMinifyCompiler.enabled": true,
"jsMinifyCompiler.minifyOnSave": true,
"jsMinifyCompiler.outputDirectory": "public/assets/js/",
"jsMinifyCompiler.preserveDirectoryStructure": false,
"jsMinifyCompiler.include": "**/*.{js,css}",
"jsMinifyCompiler.exclude": [
"**/*.min.js",
"**/*.min.css",
"**/node_modules/**",
"**/vendor/**"
],
"jsMinifyCompiler.mangle": true,
"jsMinifyCompiler.compress": true,
"jsMinifyCompiler.sourceMap": false,
"jsMinifyCompiler.css": true
}
Output Behavior
By default, all minified files are written directly into the configured output directory.
Example:
src/scripts/frontend.js
→ public/assets/js/frontend.min.js
Not:
public/assets/js/src/scripts/frontend.min.js
Set jsMinifyCompiler.preserveDirectoryStructure to true to keep source folders inside the output directory:
src/scripts/frontend.js
→ public/assets/js/src/scripts/frontend.min.js
When workspace minification would cause multiple files to write to the same output file, the extension stops and shows the collisions in the JS Minify Compiler output panel.
Available Settings
| Setting |
Default |
Description |
jsMinifyCompiler.enabled |
true |
Enables the extension globally. |
jsMinifyCompiler.minifyOnSave |
true |
Automatically minifies .js files when saving. |
jsMinifyCompiler.outputDirectory |
dist/js |
Folder where minified files are written. |
jsMinifyCompiler.preserveDirectoryStructure |
false |
Keeps source folder paths under the output folder. |
jsMinifyCompiler.include |
**/*.{js,css} |
Glob pattern used for workspace minification. |
jsMinifyCompiler.exclude |
see defaults |
Files/folders ignored by the minifier. |
jsMinifyCompiler.mangle |
true |
Shortens variable and function names. |
jsMinifyCompiler.compress |
true |
Optimizes and removes unused code. |
jsMinifyCompiler.sourceMap |
false |
Generates .map files when enabled. |
jsMinifyCompiler.css |
true |
Enables CSS minification. |
Commands
Open the Command Palette with Ctrl + Shift + P:
JS Minify Compiler: Minify Current FileJS Minify Compiler: Minify WorkspaceJS Minify Compiler: Minify SelectionJS Minify Compiler: Toggle Minify on SaveJS Minify Compiler: Set Output FolderJS Minify Compiler: Enable Source MapsJS Minify Compiler: Disable Mangle
You can also run file commands from the Explorer and editor right-click menus. The status bar item shows whether minify on save is currently enabled and can be clicked to toggle it.
