CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with async and defer attributes for script elements

—

Pending
Overview
Eval results
Files

resource-hints.mddocs/

Resource Hints

Generate preload and prefetch link tags for initial and dynamically loaded scripts to optimize loading performance.

Capabilities

Preload Resource Hints

Generate <link rel="preload"> tags for high-priority scripts that should be loaded immediately.

/**
 * Configure preload resource hints
 * @param config - Configuration for preload hints
 */
preload?: ResourceHintConfig;

interface ResourceHintConfig {
  test: string | RegExp | Array<string | RegExp>;
  chunks?: 'initial' | 'async' | 'all';
}

Usage Examples:

// Preload critical scripts
new ScriptExtHtmlWebpackPlugin({
  preload: 'critical.js'
})

// Preload multiple scripts
new ScriptExtHtmlWebpackPlugin({
  preload: ['critical.js', 'app.js']
})

// Pattern-based preloading
new ScriptExtHtmlWebpackPlugin({
  preload: /^critical.*\.js$/
})

// Preload with chunk specification
new ScriptExtHtmlWebpackPlugin({
  preload: {
    test: /\.js$/,
    chunks: 'initial'
  }
})

Prefetch Resource Hints

Generate <link rel="prefetch"> tags for lower-priority scripts that should be loaded when the browser is idle.

/**
 * Configure prefetch resource hints
 * @param config - Configuration for prefetch hints
 */
prefetch?: ResourceHintConfig;

Usage Examples:

// Prefetch analytics scripts
new ScriptExtHtmlWebpackPlugin({
  prefetch: 'analytics.js'
})

// Prefetch lazy-loaded chunks
new ScriptExtHtmlWebpackPlugin({
  prefetch: {
    test: /lazy.*\.js$/,
    chunks: 'async'
  }
})

// Combined preload and prefetch
new ScriptExtHtmlWebpackPlugin({
  preload: 'critical.js',      // High priority
  prefetch: 'analytics.js'     // Low priority
})

Chunk Targeting

Control which webpack chunks should have resource hints generated.

/**
 * Chunk types for resource hint generation
 */
type ChunkType = 'initial' | 'async' | 'all';

interface ResourceHintConfig {
  test: string | RegExp | Array<string | RegExp>;
  chunks?: ChunkType;
}

Chunk Types:

  • initial: Entry point chunks loaded immediately (default)
  • async: Dynamically imported chunks loaded on demand
  • all: Both initial and async chunks

Usage Examples:

// Preload initial chunks only (default)
new ScriptExtHtmlWebpackPlugin({
  preload: {
    test: /\.js$/,
    chunks: 'initial'
  }
})

// Prefetch async chunks for better UX
new ScriptExtHtmlWebpackPlugin({
  prefetch: {
    test: /\.js$/,  
    chunks: 'async'
  }
})

// Preload all chunks
new ScriptExtHtmlWebpackPlugin({
  preload: {
    test: /critical/,
    chunks: 'all'
  }
})

Generated HTML Output

Resource hints are inserted as <link> tags in the document head.

Preload example:

<head>
  <link rel="preload" href="critical.js" as="script">
  <script src="critical.js" async></script>
</head>

Prefetch example:

<head>
  <link rel="prefetch" href="analytics.js" as="script">
  <script src="analytics.js" async></script>
</head>

Performance Optimization Strategies

Preload for Critical Path: Use preload for scripts needed immediately for first paint or core functionality.

new ScriptExtHtmlWebpackPlugin({
  preload: 'critical.js',
  async: 'critical.js'  // Load async but preloaded
})

Prefetch for Route-Based Code Splitting: Use prefetch for route chunks that users are likely to navigate to.

new ScriptExtHtmlWebpackPlugin({
  prefetch: {
    test: /route-.*\.js$/,
    chunks: 'async'
  }
})

Combined Strategy: Use both preload and prefetch for optimal loading performance.

new ScriptExtHtmlWebpackPlugin({
  // High priority - needed immediately
  preload: {
    test: ['critical.js', 'app.js'],
    chunks: 'initial'
  },
  // Low priority - nice to have ready
  prefetch: {
    test: /^(?!critical|app).*\.js$/,
    chunks: 'async'  
  },
  // Make async chunks async loading
  async: {
    test: /\.js$/,
    chunks: 'async'
  }
})

Browser Compatibility

Resource hints are supported in modern browsers with graceful degradation:

  • Preload: Chrome 50+, Firefox 85+, Safari 11.1+
  • Prefetch: Chrome 8+, Firefox 2+, Safari 11.1+

Integration with Script Attributes

Resource hints work seamlessly with script attributes and other plugin features.

// Complete performance optimization setup
new ScriptExtHtmlWebpackPlugin({
  // Inline critical runtime
  inline: 'runtime.js',
  
  // Preload and async load critical scripts
  preload: 'critical.js',
  async: 'critical.js',
  
  // Prefetch future routes
  prefetch: {
    test: /route-.*\.js$/,
    chunks: 'async'
  },
  
  // Custom CORS attributes
  custom: [{
    test: /\.js$/,
    attribute: 'crossorigin',
    value: 'anonymous'
  }]
})

Resource Hint Validation

The plugin automatically validates resource hint configurations and ensures proper hint generation.

/**
 * Determines if resource hints should be added
 * @param options - Plugin options
 * @returns Whether resource hints are configured
 */
function shouldAddResourceHints(options: PluginOptions): boolean;

Error Handling: The plugin will skip resource hint generation if:

  • No test patterns are specified
  • Patterns don't match any assets
  • Invalid chunk configuration is provided

Install with Tessl CLI

npx tessl i tessl/npm-script-ext-html-webpack-plugin

docs

custom-attributes.md

index.md

plugin-configuration.md

resource-hints.md

script-attributes.md

script-inlining.md

tile.json