https://github.com/cyansalt/vite-plugin-html-sort-tags
Vite plugin for sorting head tags in HTML
https://github.com/cyansalt/vite-plugin-html-sort-tags
Last synced: 5 months ago
JSON representation
Vite plugin for sorting head tags in HTML
- Host: GitHub
- URL: https://github.com/cyansalt/vite-plugin-html-sort-tags
- Owner: CyanSalt
- License: isc
- Created: 2023-10-19T08:40:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-11T14:01:44.000Z (over 1 year ago)
- Last Synced: 2025-03-04T19:42:14.460Z (over 1 year ago)
- Language: TypeScript
- Size: 374 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-html-sort-tags
[](https://www.npmjs.com/package/vite-plugin-html-sort-tags)
Vite plugin for sorting head tags in HTML.
## Motivation
Handling the order of tags in HTML correctly can sometimes help page performance and user experience. For example,
- Vite adds `link` tags with `modulepreload` to the end of the head in HTML by default, which can cause preloading to be deferred if head contains other non-async scripts;
- According to the principle of Browser Resource Hints, `link` tags with `dns-prefetch` and `preconnect` should obviously be added first, `preload` second, and `prefetch` third; and they should all go before resource tags.
The plugin has a default configuration that sorts the tags in the head in what is usually the best order.
This plugin will **NOT** generate resource hints for you. Refer to [`vite-plugin-prefetch-chunk`](https://github.com/CyanSalt/vite-plugin-prefetch-chunk) and [`vite-plugin-auto-preload`](https://github.com/CyanSalt/vite-plugin-auto-preload) if necessary.
## Installation
```shell
npm install --save-dev vite-plugin-html-sort-tags
```
## Usage
```js
// vite.config.js
import htmlSortTags from 'vite-plugin-html-sort-tags'
export default {
plugins: [
htmlSortTags(),
],
}
```
## Options
### `order`
- **Type:** `(tag: import('node-html-parser').HTMLElement) => number`
A function that accepts each tag in head in turn and returns the order number of the tag. Tags with smaller order numbers will be sorted higher.
By default, tags will be ordered in a way that best suits browser parallel loading.