Déploiement de l'environnement de production

La plupart des contenus suivants sont activés par défaut lorsque vous utilisez Vue CLI. Cette section ne concerne que vos paramètres de build personnalisés.

Répertoire

• Activer le mode environnement de production

  • Ne pas utiliser les outils de build

  • Utiliser les outils de build

• Modèle pré- compilation

• Extraire le CSS du composant

• Suivi des erreurs d'exécution

Activer l'environnement de production

Dans l'environnement de développement, Vue fournira de nombreux des avertissements pour vous aider à faire face aux erreurs et aux pièges courants. Dans un environnement de production, ces avertissements sont inutiles, mais augmenteront la taille de l'application. De plus, certaines vérifications d’avertissement entraînent une légère surcharge d’exécution qui peut être évitée en mode production.

N'utilisez pas d'outils de build

Si vous utilisez la version indépendante complète de Vue, c'est-à-dire utilisez directement l'élément <script> pour introduire Vue sans construire à l'avance, n'oubliez pas de l'utiliser en production. L'environnement utilise la version compressée (vue.min.js). Les deux versions peuvent être trouvées dans les Instructions d'installation <script> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

使用构建工具

当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 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.

  🎜🎜🎜

  🎜🎜Utilisez des outils de build🎜🎜🎜🎜Lors de l'utilisation d'outils de build comme webpack ou Browserify, le code source de Vue sera basé sur process.env.NODE_ENV détermine s'il faut activer le mode environnement de production. La valeur par défaut est le mode environnement de développement. Il existe des méthodes dans webpack et Browserify pour remplacer cette variable afin d'activer le mode environnement de production de Vue, et les déclarations d'avertissement seront également supprimées par l'outil de compression pendant le processus de construction. Tout cela est préconfiguré dans le template vue-cli, mais ce serait bien de savoir comment le configurer. 🎜🎜🎜webpack🎜🎜🎜Dans webpack 4+, vous pouvez utiliser l'option mode : 🎜

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

  🎜Mais dans webpack 3 et versions antérieures, vous devez utiliser DefinePlugin🎜 : 🎜

  // 使用 envify 的自定义模块来定制环境变量var envify = require('envify/custom')
  
  browserify(browserifyOptions)
    .transform(vueify)
    .transform(    // 必填项，以处理 node_modules 里的文件
      { global: true },
      envify({ NODE_ENV: 'production' })
    )
    .bundle()

  🎜🎜Browserify🎜🎜🎜🎜🎜 Définissez NODE_ENV sur lors de l'exécution de la commande d'empaquetage "production ". Cela équivaut à dire à vueify d'éviter d'introduire du rechargement à chaud et du code lié au développement. 🎜

• Effectuez une conversion globale envify sur les fichiers packagés. Cela permet à l'outil de compression de supprimer toutes les déclarations d'avertissement enveloppées dans des conditions de variables d'environnement dans le code source de Vue. Par exemple :

// 使用 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()
    }
  }
}

• ou utilisez envify dans Gulp :

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

• ou utilisez Grunt et grunt-browserify pour utiliser envify :

Rollup

utilisez rollup-plugin-replace :

Pré-compilation de modèles

Lors de l'utilisation de modèles dans le DOM ou de modèles de chaîne dans JavaScript, les modèles sont compilés dans des fonctions de rendu au moment de l'exécution. Ce processus est généralement assez rapide, mais il est préférable d'éviter cette utilisation pour les applications sensibles aux performances.

Le moyen le plus simple de précompiler des modèles est d'utiliser des Composants de fichier unique - les paramètres de construction pertinents géreront automatiquement la précompilation, de sorte que le code construit contient déjà la fonction de rendu compilée au lieu de la chaîne du modèle d'origine.

Si vous utilisez webpack et souhaitez séparer les fichiers JavaScript et modèles, vous pouvez utiliser vue-template-loader, qui peut également convertir les fichiers modèles en fonctions de rendu JavaScript pendant le processus de construction.

Extraire le CSS du composant

Lors de l'utilisation d'un composant mono-fichier, le CSS au sein du composant sera injecté dynamiquement via JavaScript sous la forme du <style>< Balise /code>. Cela entraîne une petite surcharge d'exécution, et si vous utilisez le rendu côté serveur, cela peut provoquer une période de "scintillement de contenu non stylé (fouc)". L'extraction du CSS de tous les composants dans le même fichier évite ce problème et permet également de mieux minifier et mettre en cache le CSS. <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

查阅这个构建工具各自的文档来了解更多：

• webpack + vue-loader (vue-cli

  Consultez la documentation respective de cet outil de build pour en savoir plus :

• webpack + vue-loader (le modèle de webpack de vue-cli est préconfiguré)

• Browserify + vueify


Rollup + rollup-plugin- vue