AIKraft/AI/Войти
AIKraft/Skills/Оптимизация сборки Vite

Оптимизация сборки Vite

Teaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing dependencies, or troubleshooting slow Vite builds.

patternsdev official Разработка

Что делает навык

Предоставляет готовые паттерны для оптимизации размера бандла и производительности сборки в приложениях Vite + React, используя архитектуру Vite (ESM в разработке, Rollup в продакшене). Решает задачи уменьшения размера файлов, ускорения сборки и улучшения Core Web Vitals.

Когда применять

  • Настройка нового проекта Vite + React для продакшена
  • Анализ размера бандла с помощью npx vite-bundle-visualizer
  • Устранение медленной сборки или неожиданно большого размера бандлов
  • Миграция с webpack или Create React App (CRA) на Vite
  • Оптимизация показателей Core Web Vitals (LCP, FID/INP, CLS)

Как работает

  1. Определить необходимость оптимизации на основе симптомов (медленная сборка, большой бандл) или задач (миграция, настройка продакшена).
  2. Провести анализ размера бандла с помощью утилиты npx vite-bundle-visualizer.
  3. Применить специфичные для Vite паттерны оптимизации, учитывающие использование нативного ESM в режиме разработки и Rollup в режиме продакшена.
  4. Настроить конфигурацию сборки для достижения меньшего размера и более быстрой генерации бандлов.
  5. Проверить улучшение показателей Core Web Vitals (LCP, FID/INP, CLS) после применения оптимизаций.

Примеры запросов агенту

Как оптимизировать размер бандла в проекте Vite + React?
Сборка Vite работает медленно, бандл слишком большой. Какие паттерны применить?
Настройте оптимизацию сборки Vite для улучшения Core Web Vitals.

Что понадобится

  • npx vite-bundle-visualizer

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «vite-bundle-optimization» из репозитория: # https://github.com/patternsdev/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r vite-bundle-optimization/ ~/.claude/skills/vite-bundle-optimization/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.