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

Информация

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

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

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

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

При использовании полной сборки, т.е. подключении Vue напрямую через тег <script> без использования каких-либо систем сборки, убедитесь что используется минифицированная версия для production. Эти версии можно найти на странице установки.

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

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

# Webpack

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

module.exports = {
  mode: 'production'
}

1
2
3

# Browserify

Запустите сборку, указав в команде переменную NODE_ENV со значением "production". Это позволит vueify исключить код для горячей замены модулей, а также код, относящийся к разработке.
Примените глобальное преобразование envify (opens new window) к вашей сборке. Это позволит минификатору удалить все предупреждения из исходного кода Vue, обёрнутые в условия проверки переменной окружения. Например:
```
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
1

Или используйте envify (opens new window) вместе с Gulp:

// Используйте пользовательский модуль envify для указания переменных окружения
const envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Порядок необходим для обработки файлов node_modules
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()

1
2
3
4
5
6
7
8
9
10
11

Или используя envify (opens new window) вместе с Grunt и grunt-browserify (opens new window):

// Используйте пользовательский модуль envify для указания переменных окружения
const envify = require('envify/custom')

browserify: {
  dist: {
    options: {
      // Функция для изменения порядка по умолчанию у grunt-browserify
      configure: (b) =>
        b
          .transform('vueify')
          .transform(
            // Порядок необходим для обработки файлов node_modules
            { global: true },
            envify({ NODE_ENV: 'production' })
          )
          .bundle()
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Rollup

Используйте @rollup/plugin-replace (opens new window):

const replace = require('@rollup/plugin-replace')

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

1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

Для примера реализации обратитесь к документации соответствующей системы сборки:

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

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

← Мобильные приложения Роутинг →