Сколько стоит импорт
Пакет ships source и вытряхивается деревотряской: в бандл потребителя уезжает только то, что он импортировал. Замер на 3.30.1 — вклад самого пакета, peer-зависимости внешние, метрика gzip:
| Что импортирует потребитель | gzip |
|---|---|
cn и tableStateToParams | 0,6 кБ |
одна Button | 1,6 кБ |
DataTable | 8,5 кБ |
весь кит целиком (import *) | 63,2 кБ |
RichTextEditor из @olddevs/ui/editor, без движка, «старт» | 62,7 кБ |
RichTextEditor вместе с движком Tiptap, «старт» (статический граф, basic) | 287,8 кБ |
RichTextEditor вместе с движком Tiptap, «полный» (со всеми ленивыми чанками, full) | 329,0 кБ |
RichTextView из @olddevs/ui/editor, движок Tiptap в замер включён | 11,6 кБ |
sanitizeRichText и richTextSanitizeConfig из @olddevs/ui/editor/schema, движок Tiptap в замер включён | 3,6 кБ |
highlightCodeBlocks из @olddevs/ui/editor/highlight, вместе с lowlight | 22,6 кБ |
highlightCodeNodes из @olddevs/ui/editor/highlight, вместе с lowlight | 22,6 кБ |
Семь последних строк — отдельные входы редактора со своими бюджетами
(ADR-0050). У Редактора три строки, и две из
них — сценарии (ADR-0058, п. 11.7):
«старт» — статический граф, то, что едет сразу и что платит пресет basic; «полный» — он же
плюс все ленивые чанки подпути, то, что в итоге грузит full. Блок кода и таблица (их нет в basic,
а их часть для движка тяжелее 10 кБ) грузятся лениво, до их прихода Редактор с ними показывает Скелет;
npm run size проверяет, что их модулей в «старте» нет. Код кита меряется на «старте». В
сценариях движок внесён в замер намеренно: Tiptap — опциональная peer-зависимость, но
набор его расширений выбирает кит; с подсветкой блока кода туда же входят lowlight и восемь
грамматик highlight.js (ADR-0051). Число снято тем же конвейером, что и
остальные (vite в режиме библиотеки, где пробелы при минификации остаются);
бандлер приложения с полной минификацией давал около 133 кБ (замер OLDSUI-40, до Панели). У RichTextView
Tiptap и lowlight внесены в замер ради проверки: 10,1 кБ — это типографика и остров кнопки «Копировать» у блоков кода
(кнопка и подсказка кита, каталог сообщений; без острова было 1,7 кБ) — и они доказывают, что в его графе
нет ни движка, ни подсветчика; так же меряется лёгкий вход @olddevs/ui/editor/schema (3,6 кБ — Схема, richTextSchema, очистка sanitizeRichText с хуками для DOMPurify, в том числе по правилам своих Инструментов, и markRange).
Серверная подсветка @olddevs/ui/editor/highlight (22,6 кБ — почти целиком ядро highlight.js и
грамматики) стоит только тому, кто её импортировал, и обычно — только на сервере; хелпер
highlightCodeNodes для CodeView весит столько же — React в замер не входит, он peer кита
(ADR-0052). Кто вход @olddevs/ui/editor не импортирует, не платит ни за движок, ни за код
Редактора; в основной вход попадают только английские подписи Редактора в общем каталоге
сообщений — около 1 кБ gzip (ADR-0050, п. 5). Поповер своего цвета в Редакторе (ColorPicker и цветовая подсистема
react-aria-components, около 51 кБ gzip) грузится лениво при первом «Свой цвет…»: в «старт» он не
входит, а в «полный» — только кодом кита, react-aria — peer-зависимость. Ленивые чанки скрипт не
отбрасывает молча: их вес сверх «старта» он печатает у каждой строки. Чанки можно подгрузить
заранее — modulepreload на них ставит потребитель.
Числа сторожатся в CI и сверяются с этой таблицей: npm run size меряет вклад
пакета и падает, если документация разошлась с замером, а
npm run check:consumer меряет First Load JS страницы
приложения-потребителя. Бюджеты обеих величин лежат в
scripts/bundle-size.budgets.mjs.
Если компонент вырос по делу, бюджет поднимается — отдельной строкой в merge request и с объяснением, что именно выросло. Бюджет, который двигают заодно с правкой компонента, перестаёт что-либо сторожить уже через пару релизов.
Что лежит в пакете
Разбор решения — ADR-0042.
Кроме dist и styles.css публикуются исходники (src, без историй) и
карты к ним. На бандл потребителя это не влияет ни на байт: в браузер уезжает
только импортированный код из dist, а исходники и карты нужны инструментам —
отладчику и редактору. Цена — вес установки: 2,4 МБ распакованным против 1,4
МБ без исходников.
Покупается на них рабочая отладка. Без src карты в пакете лежали мёртвым
грузом: они ссылаются на исходник относительным путём, файла рядом не было, и
отладчик молча показывал скомпилированный код. Теперь брейкпоинт внутри кита
открывает настоящий .tsx — с комментариями, в которых объяснено, почему
компонент устроен именно так, — а «перейти к определению» ведёт туда же, а не
в .d.ts.
Публичный вход это не расширяет: exports — закрытая карта, и
import "@olddevs/ui/src/components/Link.tsx" Node и любой уважающий
exports бандлер отвергают с ERR_PACKAGE_PATH_NOT_EXPORTED. Исходники в
пакете — материал для инструментов, а не второй способ импортировать кит.
С 3.8.0 рядом с ними едет справочник — docs/ целиком и указатель
llms.txt в корне пакета (ADR-0044).
Тот же обмен, что и с исходниками: в браузер не уезжает ни байта, вес установки
растёт с 2,5 до 3,1 МБ. Смысл — в читателе: комментарий в коде объясняет, почему
компонент устроен так, а страница справочника отвечает, что брать и когда, и до
3.8.0 второго вопроса в пакете не существовало вовсе.
Открывать их надо прямо из node_modules/@olddevs/ui/: начните с llms.txt —
это указатель на все 87 страниц, — дальше по ссылкам. Импортировать их, как и
исходники, нельзя: import "@olddevs/ui/docs/index.md" отвергается тем же
ERR_PACKAGE_PATH_NOT_EXPORTED.