vite-plugin-parse-html

vite-plugin-parse-html

🎉 Features

• Insert variables into the host page through the ejs template engine;

• Through configuration items, some dynamically inserted javascript and css files are usually used to coordinate with the project externals

• Indexhtml compression

• support multi page applications

📦 Installation

  yarn add vite-plugin-parse-html -D

  npm i vite-plugin-parse-html -D

🔨 Usage

1、Use the inject and minify configuration item in vite.config.ts to configure

...
import { inject, minify } from 'vite-plugin-parse-html'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    inject({
      data: {
        title: 'test project',
      },
      sources: [
        'http://xxxx.css',
        'http://xxxx.js',
        { type: 'javascript', url: 'http://yyyy'},
      ],
    }),
    minify({
      isMinify: true,
    }),
    react(),
  ],
})

2、Using plugins in multi page programs

...
import { inject, minify } from 'vite-plugin-parse-html'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    inject([
      {
        path: '/index.html',
        data: {
          title: 'test project',
        },
        sources: [
          'http://xxxx.css',
          'http://xxxx.js',
          { type: 'javascript', url: 'http://yyyy'},
        ],
      },
      {
        path:'/nest/index.html'
        data: {
          title: 'test project',
        },
        sources: [
          'http://xxxx.css',
          'http://xxxx.js',
          { type: 'javascript', url: 'http://yyyy'},
        ],
      }
    ]),
    minify({
      isMinify: true,
    }),
    ...
  ],
})

🔗 Description of inject parameter

• inject(options: InjectOptions | InjectOptions[])

parameter	type	default	example	description
path	string	'/index.html'	'/nest/index.html'	multiple page relative path
data	Record<string, any>	{}	{title: 'xxxx'}	Variables used on the host page
ejsOptions	Options
sources	Array<SourceItem	string>	{}	[ 'http://xxx.js' ] or [{ url: 'http:xxx.js', type: 'javascript', position: 'head' }]

• SourceItem

parameter	type	default	example	description
type	'css' or 'javascript'	'css'	type: 'css'	source type
url	string		url: 'http://xxxxx'	source cdn url
position	'head' 'body' 'head-prepend' 'body-prepend'	'head'	position: 'head'	inject to html position
attrs	Record<string, any>		{ async: '' }	tags attributes and value

🔗 Description of minify parameter

• minifyOpt(options: MinifyOptions)

parameter	type	default	example	description
isMinify	boolean	true	isMinify: true	Whether to compress the host page