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.43.1 - Supports ES6+
- CSS: clean-css v5.3.31
- HTML: html-minifier v4.0.0
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:
"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.