or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

asset-processing.md content-processing.md index.md minification.md runtime-utilities.md

tile.json

HTML Minification

HTML Loader provides built-in HTML minification capabilities using html-minifier-terser, with automatic production mode detection and extensive configuration options.

Capabilities

Minification Configuration

Control HTML minification behavior through boolean or detailed options.

/**
 * Configure HTML minification
 * @param minimize - Boolean to enable/disable with defaults, or detailed configuration object
 */
interface MinimizeOptions {
  /** Treat attributes in case sensitive manner */
  caseSensitive?: boolean;
  /** Collapse white space that contributes to text nodes in a document tree */
  collapseWhitespace?: boolean;
  /** Always collapse to 1 space (never remove it entirely) */
  conservativeCollapse?: boolean;
  /** Keep the trailing slash on singleton elements */
  keepClosingSlash?: boolean;
  /** Minify CSS in style elements and style attributes */
  minifyCSS?: boolean;
  /** Minify JavaScript in script elements and event attributes */
  minifyJS?: boolean;
  /** Strip HTML comments */
  removeComments?: boolean;
  /** Remove attributes when value matches default */
  removeRedundantAttributes?: boolean;
  /** Remove type="text/javascript" from script tags */
  removeScriptTypeAttributes?: boolean;
  /** Remove type="text/css" from style and link tags */
  removeStyleLinkTypeAttributes?: boolean;
}

Default Minimizer Options

Access the default minification configuration used by html-loader.

/**
 * Default options object for HTML minification
 * These are the options applied when minimize: true
 */
const defaultMinimizerOptions: MinimizeOptions;

// Actual default values:
const defaultMinimizerOptions = {
  caseSensitive: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  keepClosingSlash: true,
  minifyCSS: true,
  minifyJS: true,
  removeComments: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true
};

Usage Examples:

// Import default options
const { defaultMinimizerOptions } = require("html-loader");

// Use defaults in webpack config
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: true // Uses defaultMinimizerOptions
  }
}

// Extend defaults with custom options
{
  test: /\.html$/i,
  loader: "html-loader", 
  options: {
    minimize: {
      ...defaultMinimizerOptions,
      removeComments: false,
      collapseWhitespace: false
    }
  }
}

Automatic Production Mode

Minification is automatically enabled in webpack production mode.

/**
 * Automatic minification behavior based on webpack mode
 * - Production mode: minimize defaults to defaultMinimizerOptions
 * - Development mode: minimize defaults to false
 * - No mode specified: treated as production, minimize defaults to defaultMinimizerOptions
 */

Configuration Examples:

// Minification automatically enabled in production
module.exports = {
  mode: 'production', // or no mode specified
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader"
        // minimize option not needed - automatically enabled
      }
    ]
  }
};

// Explicitly disable in production
module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: false
        }
      }
    ]
  }
};

// Explicitly enable in development
module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true
        }
      }
    ]
  }
};

Custom Minification Options

Override specific minification behaviors while maintaining others.

/**
 * Custom minification configuration examples
 */

Common Customizations:

// Preserve comments
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      removeComments: false
    }
  }
}

// Preserve whitespace
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      collapseWhitespace: false,
      conservativeCollapse: false
    }
  }
}

// Disable CSS/JS minification (handle with separate loaders)
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      minifyCSS: false,
      minifyJS: false
    }
  }
}

// XHTML-compatible settings
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      keepClosingSlash: true,
      caseSensitive: true,
      removeRedundantAttributes: false
    }
  }
}

// Conservative minification (minimal changes)
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      collapseWhitespace: true,
      conservativeCollapse: true,
      keepClosingSlash: true,
      removeComments: true,
      // Disable potentially breaking optimizations
      removeRedundantAttributes: false,
      removeScriptTypeAttributes: false,
      removeStyleLinkTypeAttributes: false,
      minifyCSS: false,
      minifyJS: false
    }
  }
}

Minification Safety Considerations

Understanding which options are safe to use in different contexts.

/**
 * Safety guidelines for minification options
 */

Safe Options (Generally recommended):

```
removeComments: true
```
- Safe unless comments are functionally important
```
collapseWhitespace: true
```
- Safe for most HTML
```
conservativeCollapse: true
```
- Safer than aggressive whitespace removal
```
keepClosingSlash: true
```
- Required for XHTML compatibility

Use with Caution:

```
removeRedundantAttributes: false
```
- Can affect CSS selectors and scripting behavior
```
removeEmptyAttributes: false
```
- Can affect styling and JavaScript behavior
```
caseSensitive: true
```
- Required for XML/XHTML, may cause issues with legacy HTML

Advanced Options:

```
minifyCSS: true
```
- Generally safe, uses cssnano internally
```
minifyJS: true
```
- Generally safe, uses UglifyJS internally
```
minifyURLs: false
```
- Disabled by default as base URL cannot be guaranteed

Example Safe Production Configuration:

{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      caseSensitive: true,
      collapseWhitespace: true,
      conservativeCollapse: true,
      keepClosingSlash: true,
      minifyCSS: true,
      minifyJS: true,
      removeComments: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      // Explicitly avoid potentially breaking options
      removeRedundantAttributes: false,
      removeEmptyAttributes: false,
      minifyURLs: false
    }
  }
}

Integration with html-minifier-terser

HTML Loader uses html-minifier-terser internally for minification.

/**
 * All html-minifier-terser options are supported
 * See: https://github.com/DanielRuf/html-minifier-terser#options-quick-reference
 */

Complete Option Reference:

All options from html-minifier-terser are supported, including:

```
collapseBooleanAttributes
```
```
collapseInlineTagWhitespace
```
```
collapseWhitespace
```
```
conservativeCollapse
```
```
continueOnParseError
```
```
customAttrAssign
```
```
customAttrCollapse
```
```
customAttrSurround
```
```
customEventAttributes
```
```
decodeEntities
```
```
html5
```
```
ignoreCustomComments
```
```
ignoreCustomFragments
```
```
includeAutoGeneratedTags
```
```
keepClosingSlash
```
```
maxLineLength
```
```
minifyCSS
```
```
minifyJS
```
```
minifyURLs
```
```
preserveLineBreaks
```
```
preventAttributesEscaping
```
```
processConditionalComments
```
```
processScripts
```
```
quoteCharacter
```
```
removeAttributeQuotes
```
```
removeComments
```
```
removeEmptyAttributes
```
```
removeEmptyElements
```
```
removeOptionalTags
```
```
removeRedundantAttributes
```
```
removeScriptTypeAttributes
```
```
removeStyleLinkTypeAttributes
```
```
removeTagWhitespace
```
```
sortAttributes
```
```
sortClassName
```
```
trimCustomFragments
```
```
useShortDoctype
```

Refer to the html-minifier-terser documentation for detailed descriptions of each option.