Minify your js, css and html files to save transmit bandwidth. Calls each of the minifiers directly, allowing settings to be passed:
- JS: terser v5.46.0 - Supports ES6+
- CSS: clean-css v5.3.3
- HTML: html-minifier v4.0.0
Note: Nu-Minify uses clean-css v5.x (currently v5.3.3), while the original VS Code Minify extension used clean-css v3.4.21. clean-css v5 introduced major internal and behavioral differences, so CSS output can change even with the same configuration. Options such as
rebase,restructuring, andaggressiveMergingmay have stronger or different effects compared to v3, so confirm the results that best fit your project.
Run the file minifier with F1 Minify.
Folders containing Javascript and CSS file can be minified to a single file (to {dirname}.min.[css|js]) with F1 Minify Directory. It is acceptable to have a single directory minified for both Javascript and CSS.
Optionally runs minify on save when a matching minified file (and/or directory) already exists. Enable in your user or workspace settings. The setting defaults are shown below:
The following settings are shown as examples. Some options originate from clean-css v3 and may behave differently or be ignored in v5.
"minify.minifyExistingOnSave": false,
"minify.js": {
"mangle": true,
"compress": {
"sequences": true,
"properties": true,
"dead_code": true,
"drop_debugger": true,
"unsafe": false,
"unsafe_comps": false,
"conditionals": true,
"comparisons": true,
"evaluate": true,
"booleans": true,
"loops": true,
"unused": true,
"hoist_funs": true,
"keep_fargs": true,
"keep_fnames": false,
"hoist_vars": false,
"if_return": true,
"join_vars": true,
"collapse_vars": false,
"reduce_vars": false,
"side_effects": true,
"pure_getters": false,
"pure_funcs": null,
"negate_iife": false,
"drop_console": false,
"passes": 1,
"global_defs": {}
},
"output": {
"ascii_only": false,
"inline_script": false,
"max_line_len": 32000,
"braces": false,
"semicolons": true,
"comments": false,
"shebang": true,
"preamble": null,
"quote_style": "best"
}
},
"minify.css": {
"advanced": true,
"aggressiveMerging": true,
"compatibility": "*",
"inliner": {},
"keepBreaks": false,
"keepSpecialComments": "*",
"mediaMerging": true,
"processImport": true,
"processImportFrom": ["all"],
"rebase": true,
"restructuring": true,
"root": "${workspaceRoot}",
"roundingPrecision": 2,
"semanticMerging": false,
"shorthandCompacting": true
},
"minify.html": {
"caseSensitive": false,
"collapseBooleanAttributes": true,
"collapseWhitespace": true,
"conservativeCollapse": false,
"customAttrAssign": [],
"customAttrCollapse": "",
"customAttrSurround": [],
"customEventAttributes": [ "^on[a-z]{3,}$" ],
"decodeEntities": false,
"html5": true,
"ignoreCustomComments": [ "^!" ],
"ignoreCustomFragments": ["<%[\\s\\S]*?%>", "<\\?[\\s\\S]*?\\?>"],
"includeAutoGeneratedTags": true,
"keepClosingSlash": false,
"maxLineLength": false,
"minifyCSS": true, //uses minify.css settings if true
"minifyJS": true, //uses minify.js settings if true
"minifyURLs": false,
"preserveLineBreaks": false,
"preventAttributesEscaping": false,
"processConditionalComments": false,
"processScripts": [],
"quoteCharacter": "\"",
"removeAttributeQuotes": false,
"removeComments": false,
"removeEmptyAttributes": false,
"removeEmptyElements": false,
"removeOptionalTags": false,
"removeRedundantAttributes": false,
"removeScriptTypeAttributes": false,
"removeStyleLinkTypeAttributes": false,
"sortAttributes": false,
"sortClassName": false,
"useShortDoctype": false
}minifiy.css.root accepts "${workspaceRoot}/some/path" to define the internal @import absolute root.
Since html-minifier uses clean-css, setting minifyCSS to true will embed the settings you have supplied for those minifiers automatically. You can provide your own settings as an object if you want some different methods to be used.
Like beautify for VS Code, minify accepts an array for file extension that you will accept minification of under minify.JSfiles, minify.CSSfiles, and minify.HTMLfiles.