Vue.js

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

Информация

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

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

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

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

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

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

При использовании систем сборки, таких как Webpack или Browserify, режим production определяется в исходном коде Vue значением переменной process.env.NODE_ENV и по умолчанию используется режим для разработки. Обе системы предоставляют способы переопределения этой переменной — чтобы включить режим production во Vue и удалить всё лишнее минификатором на этапе сборки. Во 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).

← Роутинг →