Развёртывание на production

Включение режима production

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

Без использования систем сборки

Если вы используете полную сборку, т.е. напрямую подключаете Vue через тег <script> без использования каких-либо систем сборки, удостоверьтесь что используете минифицированную версию (vue.min.js) для production. Обе версии можно найти на странице установки.

С использованием систем сборки

При использовании систем сборки, таких как Webpack или Browserify, режим production определяется по значению process.env.NODE_ENV внутри исходного кода Vue. По умолчанию используется режим для разработки. Обе системы сборки предоставляют возможности для переопределения этой переменной — для включения режима production в Vue и удаления всех проверок и предупреждений на этапе сборки. Все шаблоны vue-cli уже настроены для вас, но было бы полезно знать, как это делается:

Webpack

Используйте плагин Webpack DefinePlugin для установки переменных окружения. Это позволит UglifyJS на этапе сборки удалить все предупреждения. Пример конфигурации:

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
}

Browserify

Rollup

Используйте rollup-plugin-replace:

const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify( 'production' )
})
]
}).then(...)

Пре-компиляция шаблонов

При использовании DOM в качестве шаблона или строковых шаблонов в JavaScript, компиляция в render-функцию будет выполняться на лету. Это достаточно быстро для большинства случаев, но если ваше приложение нуждается в максимальной производительности стоит этого избегать.

Самый простой способ предварительной компиляции шаблонов — использовать однофайловые компоненты. На этапе сборки проекта будет выполнена предварительная компиляция, поэтому результирующий код будет содержать только render-функции вместо сырых строковых шаблонов.

Если вы используете Webpack и предпочитаете разделять JavaScript и файлы шаблонов, вы можете воспользоваться vue-template-loader, который также преобразует файлы шаблонов в render-функции на JavaScript на этапе сборки.

Извлечение CSS из компонентов

При использовании однофайловых компонентов, CSS из компонента будет динамически добавлен как тег <style> через JavaScript. Это немного увеличивает затраты времени выполнения, поэтому при использовании рендеринга на стороне сервера может привести к “мельканию неоформленного содержимого” (англ. flash of unstyled content — FOUC). Извлечение CSS из всех компонентов в один файл позволит избежать этой проблемы, а также добиться лучших результатов в минификации и кешировании CSS.

Обратитесь к документации соответствующих инструментов для сборки, чтобы узнать как это реализовать:

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

Если при рендеринге компонента произойдёт ошибка, она будет передана в глобальную функцию Vue.config.errorHandler, если таковая была указана. Использование этого хука в связке с сервисом отслеживания ошибок, например с Sentry, может быть неплохой идеей — тем более, что интеграция с Vue официально поддерживается.