vue2_rus

Публикация в продуктиве

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

Включение режима продуктива

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

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

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

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

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

• Запустите сборку, указав в команде переменную NODE_ENV со значением "production". Это позволит vueify исключить код для горячей замены модулей, а также код, относящийся к разработке.

Примените глобальное преобразование envify к вашей сборке. Это позволит минификатору удалить все предупреждения из исходного кода Vue, обёрнутые в условия проверки переменной окружения. Например:

  NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• Или используйте envify вместе с Gulp:

  // Используйте пользовательский модуль envify для указания переменных окружения
  var envify = require('envify/custom')
  
  browserify(browserifyOptions)
    .transform(vueify)
    .transform(
      // Порядок необходим для обработки файлов node_modules
      { global: true },
      envify({ NODE_ENV: 'production' })
    )
    .bundle()
  

• Или используя envify вместе с Grunt и grunt-browserify:

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

Rollup

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

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

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

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

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

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

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

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

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

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

• Webpack + vue-loader (в vue-cli с шаблоном webpack это уже настроено)
• Browserify + vueify
• Rollup + rollup-plugin-vue

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

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