0
# HTML Minification
1
2
Comprehensive HTML minification using html-minifier-next with aggressive default settings and extensive customization options.
3
4
## Capabilities
5
6
### HTML Minifier Function
7
8
Minifies HTML data with comprehensive optimization settings including embedded JavaScript and CSS minification.
9
10
```javascript { .api }
11
/**
12
* Minifies HTML data using html-minifier-next
13
* @param data - HTML source code to minify
14
* @param userOptions - Configuration options for HTML minification
15
* @returns Minified HTML code (synchronous)
16
*/
17
function minify.html(data: string, userOptions?: MinifyOptions): string;
18
19
interface MinifyOptions {
20
html?: HTMLMinifierOptions;
21
}
22
23
interface HTMLMinifierOptions {
24
removeComments?: boolean; // Remove HTML comments
25
removeCommentsFromCDATA?: boolean; // Remove comments from CDATA sections
26
removeCDATASectionsFromCDATA?: boolean; // Remove CDATA sections
27
collapseWhitespace?: boolean; // Collapse whitespace
28
collapseBooleanAttributes?: boolean; // Collapse boolean attributes
29
removeAttributeQuotes?: boolean; // Remove attribute quotes when safe
30
removeRedundantAttributes?: boolean; // Remove redundant attributes
31
useShortDoctype?: boolean; // Use short doctype
32
removeEmptyAttributes?: boolean; // Remove empty attributes
33
removeEmptyElements?: boolean; // Remove empty elements
34
removeOptionalTags?: boolean; // Remove optional tags
35
removeScriptTypeAttributes?: boolean; // Remove type="text/javascript"
36
removeStyleLinkTypeAttributes?: boolean; // Remove type="text/css"
37
minifyJS?: boolean; // Minify inline JavaScript
38
minifyCSS?: boolean; // Minify inline CSS
39
}
40
```
41
42
**Usage Examples:**
43
44
```javascript
45
import { minify } from "minify";
46
47
// Default minification with aggressive settings
48
const html = `
49
<html>
50
<head>
51
<title> My Page </title>
52
<script type="text/javascript">
53
function hello() {
54
console.log("Hello World");
55
}
56
</script>
57
<style type="text/css">
58
body { color: red; }
59
</style>
60
</head>
61
<body>
62
<p id="">Hello World</p>
63
<!-- This is a comment -->
64
</body>
65
</html>
66
`;
67
68
const minified = await minify.html(html);
69
// Result: <html><head><title>My Page</title><script>function hello(){console.log("Hello World")}</script><style>body{color:red}</style></head><body><p>Hello World</p></body></html>
70
71
// Custom configuration
72
const customMinified = await minify.html(html, {
73
html: {
74
removeComments: false, // Keep comments
75
removeOptionalTags: false, // Keep optional tags
76
minifyJS: false, // Don't minify inline JS
77
collapseWhitespace: true // Still collapse whitespace
78
}
79
});
80
```
81
82
## Default Minification Settings
83
84
The HTML minifier uses these aggressive default settings for maximum file size reduction:
85
86
```javascript { .api }
87
const defaultHTMLOptions = {
88
removeComments: true, // Remove <!-- comments -->
89
removeCommentsFromCDATA: true, // Clean CDATA sections
90
removeCDATASectionsFromCDATA: true, // Remove CDATA wrappers
91
collapseWhitespace: true, // Collapse all whitespace
92
collapseBooleanAttributes: true, // checked="checked" → checked
93
removeAttributeQuotes: true, // Remove quotes when safe
94
removeRedundantAttributes: true, // Remove default attributes
95
useShortDoctype: true, // <!DOCTYPE html>
96
removeEmptyAttributes: true, // Remove empty attributes
97
removeEmptyElements: false, // Keep empty elements (for dynamic content)
98
removeOptionalTags: true, // Remove optional HTML tags
99
removeScriptTypeAttributes: true, // Remove type="text/javascript"
100
removeStyleLinkTypeAttributes: true, // Remove type="text/css"
101
minifyJS: true, // Minify <script> content
102
minifyCSS: true // Minify <style> content
103
};
104
```
105
106
## Advanced HTML Minification Options
107
108
### Comment Handling
109
110
Control how comments are processed during minification.
111
112
```javascript { .api }
113
interface CommentOptions {
114
removeComments?: boolean; // Remove all HTML comments
115
removeCommentsFromCDATA?: boolean; // Remove comments from CDATA
116
removeCDATASectionsFromCDATA?: boolean; // Remove CDATA section markers
117
}
118
```
119
120
**Usage:**
121
122
```javascript
123
const result = await minify.html(htmlContent, {
124
html: {
125
removeComments: false, // Preserve comments for debugging
126
removeCommentsFromCDATA: true, // Clean CDATA sections
127
removeCDATASectionsFromCDATA: false // Keep CDATA markers
128
}
129
});
130
```
131
132
### Whitespace and Formatting
133
134
Configure whitespace collapse and formatting behavior.
135
136
```javascript { .api }
137
interface WhitespaceOptions {
138
collapseWhitespace?: boolean; // Collapse consecutive whitespace
139
conservativeCollapse?: boolean; // Conservative whitespace collapsing
140
preserveLineBreaks?: boolean; // Preserve line breaks
141
ignoreCustomFragments?: RegExp[]; // Ignore custom patterns
142
}
143
```
144
145
**Usage:**
146
147
```javascript
148
const result = await minify.html(htmlContent, {
149
html: {
150
collapseWhitespace: true,
151
conservativeCollapse: false, // Aggressive collapsing
152
preserveLineBreaks: false, // Remove all line breaks
153
ignoreCustomFragments: [
154
/<%[\s\S]*?%>/, // Preserve template tags
155
/<\?[\s\S]*?\?>/ // Preserve PHP tags
156
]
157
}
158
});
159
```
160
161
### Attribute Optimization
162
163
Configure how HTML attributes are optimized.
164
165
```javascript { .api }
166
interface AttributeOptions {
167
removeAttributeQuotes?: boolean; // Remove quotes when safe
168
removeRedundantAttributes?: boolean; // Remove default attributes
169
removeEmptyAttributes?: boolean; // Remove empty attributes
170
collapseBooleanAttributes?: boolean; // Simplify boolean attributes
171
sortAttributes?: boolean; // Sort attributes alphabetically
172
sortClassName?: boolean; // Sort CSS class names
173
}
174
```
175
176
**Usage:**
177
178
```javascript
179
const result = await minify.html(htmlContent, {
180
html: {
181
removeAttributeQuotes: true, // class=btn → class=btn
182
removeRedundantAttributes: true, // Remove input type="text"
183
removeEmptyAttributes: true, // Remove empty attributes
184
collapseBooleanAttributes: true, // checked="checked" → checked
185
sortAttributes: true, // Alphabetical attribute order
186
sortClassName: true // Sort class names
187
}
188
});
189
```
190
191
### Tag and Element Optimization
192
193
Control removal of optional tags and empty elements.
194
195
```javascript { .api }
196
interface TagOptions {
197
removeOptionalTags?: boolean; // Remove optional HTML tags
198
removeEmptyElements?: boolean; // Remove empty elements
199
removeScriptTypeAttributes?: boolean; // Remove script type attributes
200
removeStyleLinkTypeAttributes?: boolean; // Remove style/link type attributes
201
useShortDoctype?: boolean; // Use HTML5 doctype
202
}
203
```
204
205
**Usage:**
206
207
```javascript
208
const result = await minify.html(htmlContent, {
209
html: {
210
removeOptionalTags: false, // Keep <html>, <head>, <body>
211
removeEmptyElements: false, // Keep empty divs for JS
212
removeScriptTypeAttributes: true, // Remove type="text/javascript"
213
removeStyleLinkTypeAttributes: true, // Remove type="text/css"
214
useShortDoctype: true // Use <!DOCTYPE html>
215
}
216
});
217
```
218
219
### Embedded Content Minification
220
221
Configure minification of inline JavaScript and CSS.
222
223
```javascript { .api }
224
interface EmbeddedContentOptions {
225
minifyJS?: boolean | object; // Minify inline JavaScript
226
minifyCSS?: boolean | object; // Minify inline CSS
227
minifyURLs?: boolean | object; // Minify URLs in attributes
228
}
229
```
230
231
**Usage:**
232
233
```javascript
234
const result = await minify.html(htmlContent, {
235
html: {
236
minifyJS: { // Custom JS minification
237
mangle: false,
238
compress: {
239
drop_console: false
240
}
241
},
242
minifyCSS: { // Custom CSS minification
243
level: 1,
244
compatibility: '*'
245
},
246
minifyURLs: true // Shorten URLs where possible
247
}
248
});
249
```
250
251
## HTML Processing Examples
252
253
### Basic Document Minification
254
255
```javascript
256
const document = `
257
<!DOCTYPE html>
258
<html lang="en">
259
<head>
260
<meta charset="UTF-8">
261
<title>Sample Page</title>
262
<style type="text/css">
263
body { margin: 0; padding: 20px; }
264
.header { color: blue; }
265
</style>
266
</head>
267
<body>
268
<div class="header">
269
<h1>Welcome</h1>
270
</div>
271
<script type="text/javascript">
272
console.log('Page loaded');
273
</script>
274
</body>
275
</html>
276
`;
277
278
const minified = await minify.html(document);
279
// Result: <!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Sample Page</title><style>body{margin:0;padding:20px}.header{color:blue}</style></head><body><div class=header><h1>Welcome</h1></div><script>console.log("Page loaded")</script></body></html>
280
```
281
282
### Template-Friendly Minification
283
284
```javascript
285
const template = `
286
<div class="user-card">
287
<%= user.name %>
288
<% if (user.avatar) { %>
289
<img src="<%= user.avatar %>" alt="" />
290
<% } %>
291
</div>
292
`;
293
294
const minified = await minify.html(template, {
295
html: {
296
ignoreCustomFragments: [/<%[\s\S]*?%>/], // Preserve template syntax
297
removeEmptyAttributes: false, // Keep empty alt attributes
298
collapseWhitespace: true
299
}
300
});
301
```
302
303
## Error Handling
304
305
HTML minification handles various error conditions:
306
307
- **Invalid HTML**: Malformed HTML is processed with error tolerance
308
- **Missing Data**: Throws assertion error if data parameter is empty
309
- **Minifier Errors**: html-minifier-next errors are propagated with context
310
- **Template Conflicts**: Custom fragment preservation prevents template corruption
311
312
**Error Examples:**
313
314
```javascript
315
// Empty data validation
316
try {
317
const result = minify.html("");
318
} catch (error) {
319
console.log(error); // AssertionError
320
}
321
322
// Malformed HTML handling
323
const malformed = '<div><p>Unclosed paragraph</div>';
324
const result = minify.html(malformed); // Processed with tolerance
325
326
// Custom configuration errors
327
try {
328
const result = minify.html(htmlContent, {
329
html: {
330
invalidOption: true // Unknown option
331
}
332
});
333
} catch (error) {
334
console.log(error.message); // Configuration error
335
}
336
```