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

Большинство из советов, описанных ниже, уже включены, если вы используете Vue CLI. Этот раздел актуален только в том случае, если вы используете собственные конфигурации сборки.

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

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

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

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

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

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

Webpack

С версии Webpack 4+ вы можете использовать опцию mode:

module.exports = {
mode: 'production'
}

Но в версиях Webpack 3 и более ранних вам необходимо использовать DefinePlugin:

var webpack = require('webpack')

module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('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 официально поддерживается.