Развертывание производства

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

Включить режим производства

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

Без инструментов сборки

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

С инструментами сборки

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

Webpack

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

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, обернутые в условные блоки переменных env. Например:

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

Или мы можем использовать envify с Gulp:

// we uUse the envify custom module to specify environment variables
var envify = require('envify/custom')
browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Required in order to process node_modules files
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
Or, using envify with grunt-browserify and Grunt:
// we use the envify custom module to specify environment variables
var envify = require('envify/custom')
browserify: {
  dist: {
    options: {
      // A Function to deviate from grunt-browserify's default order
      configure: b => b
        .transform('vueify')
        .transform(
          // Thus is required in order to process node_modules files
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Свернуть

Мы используем rollup-plugin-replace:

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

Шаблоны предварительной компиляции

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

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

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

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

Когда мы используем однофайловые компоненты, CSS, которые находятся внутри компонентов, динамически внедряются как теги <style> через JavaScript. Стоимость выполнения этого невелика, и если вы используете рендеринг на стороне сервера, это вызовет «вспышку нестандартного контента». Извлечение CSS всех компонентов в один и тот же файл позволит избежать этих проблем, а также приведет к лучшей минимизации CSS и кешированию наших приложений.

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

• Webpack + vue-loader (предварительно настроен шаблон веб-пакета vue-cli)
• Browserify + vueify
• Rollup + rollup-plugin-vue

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

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