Vite Plugin Html

Overview

The vite-plugin-html is a plugin for the Vite build tool that provides capabilities for HTML compression and EJS template functionality. It also supports multi-page applications and allows for customization of entry points and templates.

Features

• HTML compression capability: Reduce the size of HTML files for improved performance.
• EJS template capability: Use EJS syntax to inject dynamic content into HTML files.
• Multi-page application support: Configure and build multi-page applications.
• Support custom entry: Customize the entry file path for each page.
• Support custom template: Specify a relative path to the HTML template for each page.

Usage

1. Add EJS tags to your index.html file to indicate where you want to inject dynamic content.
2. Configure the plugin in the vite.config.ts file. This method allows you to introduce the required functions as needed.

import { UserOptions } from 'vite-plugin-html';

createHtmlPlugin(options: UserOptions)

• entry: Specify the entry file path for each page. The default is src/main.ts.
• template: Specify the relative path to the HTML template for each page. The default is index.html.
• inject: Data injected into HTML using the InjectOptions configuration.
• minify: Option to compress HTML. Set to true or set MinifyOptions for custom configuration.
• pages: Configuration for multi-page applications.

interface InjectOptions {
  data: Record<string, any>;
  ejsOptions: EJSOptions;
  tags: HtmlTagDescriptor[];
}

interface MinifyOptions {
  // Custom compression configuration
}

interface PageOption {
  filename: string;
  template: string;
  entry: string;
  injectOptions: InjectOptions;
}

Data can be accessed in HTML using the EJS template syntax.

By default, the contents of the .env file will be injected into the index.html file, similar to Vite's loadEnv function.

Summary

The vite-plugin-html is a useful plugin for the Vite build tool that adds HTML compression and EJS template functionality. It supports multi-page applications and allows for customization of entry points and templates. With its features and easy installation, it provides developers with greater flexibility in building optimized and dynamic web applications.