@okcy/vite-plugin-html

v3.2.1

Published

a year ago

A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html

Downloads

0High
0Medium
0Low

okchenyi

vite html minify vite-plugin

vite-plugin-html

English | 中文

Features

HTML compression capability
EJS template capability
Multi-page application support
Support custom entry
Support custom template

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

yarn add vite-plugin-html -D

或

npm i vite-plugin-html -D

Usage

Add EJS tags to index.html, e.g.

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%- title %></title>
  <%- injectScript %>
</head>

Configure in vite.config.ts, this method can introduce the required functions as needed

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'

import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      /**
       * After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
       * @default src/main.ts
       */
      entry: 'src/main.ts',
      /**
       * If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
       * @default index.html
       */
      template: 'public/index.html',

      /**
       * Data that needs to be injected into the index.html ejs template
       */
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="./inject.js"></script>`,
        },
        tags: [
          {
            injectTo: 'body-prepend',
            tag: 'div',
            attrs: {
              id: 'tag',
            },
          },
        ],
      },
    }),
  ],
})

Multi-page application configuration

import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      pages: [
        {
          entry: 'src/main.ts',
          filename: 'index.html',
          template: 'public/index.html',
          injectOptions: {
            data: {
              title: 'index',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag1',
                },
              },
            ],
          },
        },
        {
          entry: 'src/other-main.ts',
          filename: 'other.html',
          template: 'public/other.html',
          injectOptions: {
            data: {
              title: 'other page',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag2',
                },
              },
            ],
          },
        },
      ],
    }),
  ],
})

Parameter Description

createHtmlPlugin(options: UserOptions)

UserOptions

| Parameter | Types | Default | Description | | --------- | ------------------------ | ------------- | ----------------------------- | | entry | string | src/main.ts | entry file path | | template | string | index.html | relative path to the template | | inject | InjectOptions | - | Data injected into HTML | | minify | boolean｜MinifyOptions | - | whether to compress html | | pages | PageOption | - | Multi-page configuration |

InjectOptions

| Parameter | Types | Default | Description | | ---------- | --------------------- | ------- | ------------------------------------------------------------------------- | | data | Record<string, any> | - | injected data | | ejsOptions | EJSOptions | - | ejs configuration OptionsEJSOptions | | tags | HtmlTagDescriptor | - | List of tags to inject |

data can be accessed in html using the ejs template syntax

Env inject

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

PageOption

| Parameter | Types | Default | Description | | ------------- | --------------- | ------------- | ----------------------------- | | filename | string | - | html file name | | template | string | index.html | relative path to the template | | entry | string | src/main.ts | entry file path | | injectOptions | InjectOptions | - | Data injected into HTML |

MinifyOptions

Default compression configuration

    collapseWhitespace: true,
    keepClosingSlash: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
    minifyCSS: true,

Run the playground

pnpm install

# spa
cd ./packages/playground/basic

pnpm run dev

# map
cd ./packages/playground/mpa

pnpm run dev

Example project

Vben Admin

License

MIT