@budarin/vite-plugin-set-head-in-order
v1.0.5
Published
Vite plugin to set elements in head in right order
Downloads
136
Readme
vite-plugin-set-head-in-order
Плагин Vite, который упорядочивает элементы внутри <head> по правилам capo.js, сохраняя порядок элементов внутри каждой группы.
Почему
- Правильный порядок элементов в
<head>влияет на производительность и корректность загрузки ресурсов. - Плагин реализует порядок групп согласно правилам capo.js:
meta,base,title, подсказки соединений, скрипты и стили в нужной последовательности, разделённые по типам.
Ссылка на правила capo.js
- Правила упорядочивания: capo.js — User rules
Установка
pnpm add -D @budarin/vite-plugin-set-head-in-order
# или
npm i -D @budarin/vite-plugin-set-head-in-order
# или
yarn add -D @budarin/vite-plugin-set-head-in-orderИспользование
// vite.config.ts
import { defineConfig } from 'vite';
import setHeadInOrderPlugin from '@budarin/vite-plugin-set-head-in-order';
export default defineConfig({
plugins: [setHeadInOrderPlugin()],
});Что делает
- Обрабатывает только прямых потомков
head. - Классифицирует элементы по группам в порядке capo.js и пересобирает
head, сохраняя исходный порядок элементов внутри каждой группы.
Ключевые моменты порядка:
- Синхронные скрипты (inline и простые внешние без async/defer/module) идут ДО любых preload.
- Синхронные стили (
link[rel="stylesheet"],style) стоят ПЕРЕД прелоадом стилей. - Прелоад стилей — выше прелоада скриптов (
modulepreload,preload[as="script"]).
Порядок элементов в head (человеческим языком)
- Базовые метаданные страницы: кодировка, служебные заголовки (http-equiv), настройки вьюпорта.
- Базовый URL для ссылок (
<base>), затем заголовок страницы (<title>). - Ранние настройки модулей: карта импортов (
importmap). - Подсказки сети: установки соединения заранее (preconnect, dns-prefetch).
- Блок стилей и скриптов в таком порядке:
- Сначала инлайн‑скрипты (обычные, без async/defer/module).
- Затем инлайн‑стили (
<style>). - прелоад стилей (link rel="preload" as="style")
- загрузка обычных таблиц стилей (link rel="stylesheet").
- Затем прелоад скриптов (link rel="modulepreload" и preload as="script").
- Затем загрузка скриптов: сначала обычные внешние (plain src), потом async/ES‑модули, затем defer.
- Прочие прелоады ресурсов (шрифты, изображения и т.п.).
- Остальное: прочие мета‑теги, иконки/манифест/предвыборка (prefetch, prerender).
Порядок внутри каждой группы НЕ меняется.
Лицензия
MIT