Development vs. Production
Во время разработки Vue предоставляет ряд функций для улучшения процесса разработки
- Предупреждение о распространенных ошибках и подводных камнях
- Проверка реквизита/событий
- Хуки отладки реактивности
- Интеграция с инструментами разработчика
Однако эти функции становятся бесполезными в производстве. Некоторые проверки предупреждений также могут привести к небольшому снижению производительности. При развертывании в рабочей среде нам следует удалить все неиспользуемые ветки кода, предназначенные только для разработки, чтобы уменьшить размер полезной нагрузки и повысить производительность
# Хуки отладки компонентов
Мы можем отладить, какие зависимости используются во время рендеринга компонента и какая зависимость запускает обновление, используя хуки жизненного цикла и . Оба перехватчика получат событие отладчика, содержащее информацию о рассматриваемой зависимости. Рекомендуется поместить оператор в обратные вызовы для интерактивной проверки зависимости: onRenderTracked onRenderTriggered debugger
Важно
Перехватчики отладки компонентов работают только в режиме разработки
Объекты событий отладки имеют следующий тип
# Вычислительная отладка
Мы можем отлаживать вычисляемые свойства, передавая computed()второй объект параметров с помощью onTrackи onTrigger обратных вызовов
- onTrack будет вызываться, когда реактивное свойство или ссылка отслеживается как зависимость.
- onTrigger будет вызываться, когда обратный вызов наблюдателя инициируется мутацией зависимости.
Оба обратных вызова будут получать события отладчика в том же формате , что и перехватчики отладки компонентов
Обратите внимание
onTrack & onTrigger вычисляемые параметры работают только в режиме разработки.
# Отладка наблюдателя
Подобно computed(), наблюдатели также поддерживают параметры onTrack и onTrigger
Обратите внимание
onTrack и onTrigger параметры наблюдателя работают только в режиме разработки
Вернемся к production deployment
# Без инструментов сборки
Если вы используете Vue без инструмента сборки, загружая его из CDN или локального сценария, обязательно используйте производственную сборку (файлы dist, оканчивающиеся на .prod.js) при развертывании в рабочей среде. Производственные сборки предварительно минимизированы, при этом все ветки кода, предназначенные только для разработки, удалены.
- Если вы используете глобальную сборку (доступ через Vueглобальный): используйте vue.global.prod.js
- При использовании сборки ESM (доступ через собственный импорт ESM): используйте vue.esm-browser.prod.js.
- Для получения более подробной информации обратитесь к руководству по файлам dist
# С инструментами сборки
Проекты, созданные с помощью create-vue(на основе Vite) или Vue CLI (на основе веб-пакета), предварительно настроены для производственных сборок
При использовании пользовательской настройки убедитесь, что
- 1. vue решает vue.runtime.esm-bundler.js.
- 2. Флаги функций времени компиляции настроены правильно
- 3. process.env.NODE_ENV заменяется на "production" во время сборки.
Дополнительные ссылки