Публикация на production #

Full Stack Engineer

DoraHacks · Remote

Staff Frontend Engineer (Web Experience)

Kpler · London, UK

Вакансии vuejobs.com

Разработка vs. production #

В процессе разработки Vue предоставляет ряд возможностей, улучшающих опыт разработки:

• Предупреждение о распространенных ошибках и подводных камнях
• Валидация входных параметров / событий
• Хуки для отладки реактивности
• Интеграция с инструментами разработчика

Однако в production эти функции становятся бесполезными. Некоторые из проверок также могут привести к небольшим накладным расходам на производительность. При публикации в production следует отказаться от всех неиспользуемых веток кода, предназначенных только для разработки, чтобы уменьшить размер итоговой сборки и повысить производительность.

Без инструментов для сборки #

Если вы используете Vue без инструмента сборки, загружая его из CDN или самостоятельно размещая скрипт на хостинге, при развертывании на production обязательно используйте production сборку (файлы dist, заканчивающиеся на .prod.js). Production сборки предварительно минифицированы, из них удалены все ветви кода, предназначенные только для разработки.

• При использовании глобальной сборки (доступ через глобальный Vue): используйте vue.global.prod.js.
• При использовании ESM-сборки (доступ через нативные ESM-импорты): используйте vue.esm-browser.prod.js.

Более подробная информация приведена в руководстве по использованию файлов dist.

С помощью инструментов сборки #

Проекты, созданные с помощью create-vue (на базе Vite) или Vue CLI (на базе webpack), предварительно настроены для production сборок.

При использовании собственных настроек убедитесь, что:

1. vue разрешается в vue.runtime.esm-bundler.js.
2. Флаги функций времени компиляции настроены должным образом.
3. process.env.NODE_ENV заменяется на "production" во время сборки.

Дополнительные ссылки:

• Руководство по сборке Vite для production
• Руководство по развертыванию Vite
• Руководство по развертыванию Vue CLI

Отслеживание ошибок времени выполнения #

Обработчик ошибок на уровне приложения может быть использован для сообщения об ошибках службам отслеживания:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // сообщаем об ошибке в сервис трекинга
}

Такие сервисы, как Sentry и Bugsnag, также предоставляют официальные интеграции для Vue.