Minify your js, css and html files to save transmit bandwidth. Calls each of the minifiers directly, allowing settings to be passed:
- JS: uglify-js v2.7.4
- CSS: clean-css v3.4.21
- HTML: html-minifier v3.2.2
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. Enalbe 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 also uses clean-css and uglify-js, setting minifyJS or 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.