{"id":13606116,"url":"https://github.com/tomjs/vite-plugin-html","last_synced_at":"2025-04-10T13:32:35.448Z","repository":{"id":205553140,"uuid":"714496101","full_name":"tomjs/vite-plugin-html","owner":"tomjs","description":"A Vite plugin for handling HTML files, providing compression, loading, and CDN functionality.","archived":false,"fork":false,"pushed_at":"2024-07-01T16:06:46.000Z","size":323,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T12:11:26.331Z","etag":null,"topics":["cdn","compression","html","loading","minify","plugin","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-05T02:38:23.000Z","updated_at":"2024-09-24T18:18:39.000Z","dependencies_parsed_at":"2023-11-29T13:29:45.015Z","dependency_job_id":"bf347ab7-8f35-4798-8de1-f74757b37fc7","html_url":"https://github.com/tomjs/vite-plugin-html","commit_stats":null,"previous_names":["tomgao365/vite-plugin-html","tomjs/vite-plugin-html"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomjs","download_url":"https://codeload.github.com/tomjs/vite-plugin-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225707,"owners_count":21068078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cdn","compression","html","loading","minify","plugin","vite"],"created_at":"2024-08-01T19:01:06.229Z","updated_at":"2025-04-10T13:32:35.400Z","avatar_url":"https://github.com/tomjs.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# @tomjs/vite-plugin-html\n\n[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-html)](https://www.npmjs.com/package/@tomjs/vite-plugin-html) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-html) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-html) [![Docs](https://img.shields.io/badge/API-unpkg-orange)](https://www.unpkg.com/browse/@tomjs/vite-plugin-html/dist/index.d.ts)\n\n**English** | [中文](./README.zh_CN.md)\n\n\u003e A Vite plugin for handling HTML files, providing compression, loading, and CDN functionality.\n\n## Install\n\nWith `pnpm`\n\n```bash\npnpm add @tomjs/vite-plugin-html -D\n```\n\nWith `yarn`\n\n```bash\nyarn add @tomjs/vite-plugin-html -D\n```\n\nWith `npm`\n\n```bash\nnpm add @tomjs/vite-plugin-html -D\n```\n\n## Usage\n\nTaking Vue/React projects as examples:\n\n### Default Plugin\n\n#### Vue Example\n\n```js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport html from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    html({\n      minify: true,\n      loading: {\n        // selector: '#app',\n        after: `\u003cdiv style=\"color:#888\"\u003eloading...\u003c/div\u003e`,\n      },\n      cdn: {\n        modules: ['vue', 'vue-router', 'pinia', 'ant-design-vue'],\n      },\n    }),\n  ],\n});\n```\n\n#### React Example\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react-swc';\nimport html from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    html({\n      minify: true,\n      loading: {\n        selector: '#root',\n        after: `\u003cdiv style=\"color:#888\"\u003eloading...\u003c/div\u003e`,\n      },\n      cdn: {\n        modules: ['react', 'react-dom', 'react-router-dom', 'antd'],\n      },\n    }),\n  ],\n});\n```\n\n#### Documentation\n\n- [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-html/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n| --- | --- | --- | --- |\n| minify | `boolean` \\| [HtmlMinifyOptions](#HtmlMinifyOptions) | true | Configuration for compression plugin |\n| loading | `boolean` \\| [HtmlLoadingOptions](#HtmlLoadingOptions) | false | Configuration for loading plugin |\n| cdn | `false` \\| [HtmlCdnOptions](#HtmlCdnOptions) | false | Configuration for CDN plugin |\n\n### Using Compression\n\nCompresses HTML code.\n\n#### Vue Example\n\n```ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { useHtmlMinifyPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [vue(), useHtmlMinifyPlugin()],\n});\n```\n\n#### React Example\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react-swc';\nimport { useHtmlMinifyPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [react(), useHtmlMinifyPlugin()],\n});\n```\n\n#### Parameters\n\n`boolean` or [HtmlMinifyOptions](#HtmlMinifyOptions), default is `true` .\n\n##### HtmlMinifyOptions\n\nSame as the `Options` parameter of [html-minifier-terser](https://www.npmjs.com/package/html-minifier-terser#options-quick-reference). When the plugin parameter is `boolean` , the default configuration is as follows. Otherwise, it uses the default configuration of `html-minifier-terser` .\n\n| Parameter | Type | Default | Description |\n| --- | --- | --- | --- |\n| collapseWhitespace | `boolean` | true | Collapse white space that contributes to text nodes |\n| keepClosingSlash | `boolean` | true | Keep the trailing slash on singleton elements |\n| removeComments | `boolean` | true | Remove HTML comments |\n| removeRedundantAttributes | `boolean` | true | Remove attributes when value matches default |\n| removeScriptTypeAttributes | `boolean` | true | Remove `type=\"text/javascript\"` from script tags |\n| removeStyleLinkTypeAttributes | `boolean` | true | Remove `type=\"text/css\"` from style and link tags |\n| useShortDoctype | `boolean` | true | Replace `doctype` with short (HTML5) doctype |\n| minifyCSS | `boolean` | true | Minify CSS in style elements and style attributes (using clean-css) |\n\n### Using Loading\n\nAdds loading code to the root node of the application to prevent white screens caused by network issues.\n\n#### Vue Example\n\n```js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { useHtmlLoadingPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    useHtmlLoadingPlugin({\n      // selector: '#app',\n      after: `\u003cdiv style=\"color:#888\"\u003eloading...\u003c/div\u003e`,\n    }),\n  ],\n});\n```\n\n#### React Example\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react-swc';\nimport { useHtmlLoadingPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    useHtmlLoadingPlugin({\n      selector: '#root',\n      after: `\u003cdiv style=\"color:#888\"\u003eloading...\u003c/div\u003e`,\n    }),\n  ],\n});\n```\n\n#### Parameters\n\n`boolean` or [HtmlLoadingOptions](#HtmlLoadingOptions), default is `true` .\n\n##### HtmlLoadingOptions\n\n| Parameter | Type     | Default   | Description                |\n| --------- | -------- | --------- | -------------------------- |\n| selector  | `string` | #app      | Selector for loading node  |\n| style     | `string` | undefined | Custom style code          |\n| before    | `string` | undefined | Code to add before loading |\n| after     | `string` | undefined | Code to add after loading  |\n\n### Using CDN\n\nChanges module configuration to use CDN for `vite build` , improving build speed and reducing bundle size.\n\n#### Vue Example\n\n```ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { useHtmlCdnPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    useHtmlCdnPlugin({\n      modules: ['vue', 'vue-router', 'pinia', 'ant-design-vue'],\n    }),\n  ],\n});\n```\n\n#### React Example\n\n```ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react-swc';\nimport { useHtmlCdnPlugin } from '@tomjs/vite-plugin-html';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    useHtmlCdnPlugin({\n      modules: ['react', 'react-dom', 'react-router-dom', 'antd'],\n    }),\n  ],\n});\n```\n\n#### Parameters\n\n##### HtmlCdnOptions\n\n| Parameter | Type | Default | Description |\n| --- | --- | --- | --- |\n| **modules** | ([NpmModule](#NpmModule) \\| [PresetNpmModule](#PresetNpmModule) \\| [HtmlInjectCode](#HtmlInjectCode))[] | [] | Modules to import |\n| type | `'npmmirror' \\| 'unpkg' \\| 'jsdelivr' \\| 'custom'` | 'jsdelivr' | `CDN` source type, parameters `name`/`version`/`file` are taken from the modules configuration. When the OS language is `zh_CN` , the default value is `npmmirror`, otherwise it is `jsdelivr`. |\n| url | `string` | '' | Custom URL (used with `type` ) |\n| local | 'boolean' \\| 'string[]' \\| [HtmlCdnLocal](#HtmlCdnLocal) | false | Local mode or specific modules |\n\nCDN type:\n\n- npmmirror: url defaults to https://registry.npmmirror.com/{name}/{version}/files/{file}\n- jsdelivr: url defaults to https://cdn.jsdelivr.net/npm/{name}@{version}/{file}\n- unpkg: url defaults to https://unpkg.com/{name}@{version}/{file}\n- custom: custom url can be defined\n\n##### NpmModule\n\nConfiguration for CDN modules.\n\n| Parameter | Type | Default | Description |\n| --- | --- | --- | --- |\n| **name** | `string` | undefined | Name of the package |\n| var | `string` | undefined | Global variable name (defaults to PascalCase name) |\n| version | `string` | undefined | Package version (defaults to version in node_modules) |\n| file | `string \\| string[]` | undefined | Path to the resource JS/CSS file |\n| modulePath | `string` | undefined | Set npm module path |\n| deps | `string[]` | undefined | Dependent modules |\n| local | `boolean` | false | Whether it is a local module |\n| injectBefore | `string \\| string[]` | undefined | These codes will be inserted before the script/link tag of the current module.The `{url}` keyword in the code will be replaced with relevant information about the current module. |\n| injectAfter | `string \\| string[]` | undefined | These codes will be inserted after the script/link tag of the current module.The `{url}` keyword in the code will be replaced with relevant information about the current module. |\n\nExample:\n\n```ts\nconst modules = [\n  {\n    name: 'lodash',\n    var: '_',\n    file: 'lodash.min.js',\n  },\n  {\n    name: 'vue',\n    var: 'Vue',\n  },\n  {\n    name: 'vue-router',\n    deps: ['vue'],\n  },\n  {\n    name: 'ant-design-vue',\n    deps: ['vue', 'vue-router'],\n    file: ['dist/antd.min.js'],\n  },\n];\n```\n\n##### PresetNpmModule\n\nDefault supported types, internally mapped to corresponding [NpmModule](#NpmModule) configurations:\n\n- dayjs\n- axios\n- lodash\n- vue\n- vue-router\n- vue-demi\n- pinia\n- ant-design-vue\n- ant-design-vue3\n- @vueuse/core\n- @vueuse/shared\n- element-plus\n- react\n- react-dom\n- react-router-dom\n- antd\n- ahooks\n- @ant-design/charts\n\n**WARNING**\n\nSome modules are introduced using `CDN`, and other dependencies must be introduced first. When using package management tools such as `pnpm`, if the module's dependencies are not explicitly installed, the module's dependency information may not be obtained in `node_modules`, and the following exceptions may occur:\n\n- The URL of `CDN` has no version number\n- In `local` mode, dependencies are thrown in the form of `CDN` URL\n\nYou can try to proactively install related dependencies to solve them. The following are some module dependencies:\n\n- antd\n  - dayjs\n- ant-design-vue\n  - dayjs\n- pinia\n  - vue-demi\n- @vueuse/core\n  - @vueuse/shared\n\nCurrently, this library uses `pnpm list` to read dependencies to solve this problem. If you encounter this problem with other `npm` tools, please contact the author to add relevant support. Thanks.\n\n##### HtmlInjectCode\n\nInjected HTML page code.\n\n| Parameter | Type     | Default   | Description              |\n| --------- | -------- | --------- | ------------------------ |\n| **code**  | `string` | undefined | HTML page code to inject |\n\n##### HtmlCdnLocal\n\nLocal configuration for CDN.\n\n| Parameter | Type | Default | Description |\n| --- | --- | --- | --- |\n| **modules** | `'boolean' \\| string[]` | false | Local mode or specific modules |\n| base | 'string' | '/' | Same as Vite's `base` option |\n| outDir | 'string' | 'dist' | Local output directory, defaults to Vite's `build.outDir` |\n| path | 'string' | 'npm/{name}@{version}' | Local output path, module URLs will also be replaced with this path |\n| copy | 'boolean' | true | Whether to copy to local directory |\n\n## Development\n\n- Development requirements:\n\n  - git\n  - node\u003e=18\n  - pnpm\u003e=8\n\n- For first-time use, install dependencies by running the following commands:\n\n```bash\n# Install dependencies\npnpm i\n# build library\npnpm build\n```\n\n- To debug the `vue` project, execute the following commands:\n\n```bash\ncd examples/vue\npnpm build\npnpm preview\n```\n\n- To debug the `react` project, execute the following commands:\n\n```bash\ncd examples/react\npnpm build\npnpm preview\n```\n\n## References\n\n- [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html)\n- [ant-design-pro](https://github.com/ant-design/ant-design-pro)\n- [vite-plugin-cdn-import](https://www.npmjs.com/package/vite-plugin-cdn-import)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomjs%2Fvite-plugin-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomjs%2Fvite-plugin-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomjs%2Fvite-plugin-html/lists"}