You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/deployment.md
+15-15
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
-
title: Astuce de déploiement en production
2
+
title: Astuces de déploiement en production
3
3
type: guide
4
4
order: 20
5
5
---
6
6
7
7
## Passer en mode production
8
8
9
-
Pendant le développement, Vue fournit beaucoup d'avertissements pour vous aider avec les erreurs usuelles et les pièges. Ces suites d'avertissements deviennent cependant inutiles en production et gonflent votre taille en production. De plus, plusieurs de ces avertissements ont un léger coût d'exécution qui peut être évité en mode production.
9
+
Pendant le développement, Vue fournit beaucoup d'avertissements pour vous aider avec les erreurs usuelles et les pièges. Ces messages d'avertissement deviennent cependant inutiles en production et gonflent la taille de votre application en production. De plus, certains de ces avertissements ont un léger coût d'exécution qui peut être évité en mode production.
10
10
11
11
### Sans outils de build
12
12
13
-
Si vous utilisez la version complète, c.-à-d. en incluant directement Vue via une balise script sans outil de build, assurez-vous d'utiliser la version minifiée (`vue.min.js`) pour la production. Ces deux versions peuvent être trouvée dans le [guide d'installation](installation.html#Inclusion-directe-lt-script-gt).
13
+
Si vous utilisez la version complète, c.-à-d. en incluant directement Vue via une balise script sans outil de build, assurez-vous d'utiliser la version minifiée (`vue.min.js`) pour la production. Ces deux versions peuvent être trouvées dans le [guide d'installation](installation.html#Inclusion-directe-lt-script-gt).
14
14
15
15
### Avec outils de build
16
16
17
-
Quand vous utilisez un outil de build comme webpack ou Browserify, le mode production va déterminer la valeur de `process.env.NODE_ENV` utilisée dans le code source, et sera en mode développement par défaut. Ces deux outils fournissent des moyens de surcharger cette variable pour activer le mode production de Vue, et les avertissements seront retirés par le minificateur pendant le build. Tous les templates `vue-cli` sont pré-configurés pour vous, mais il est avantageux de savoir comment cela fonctionne :
17
+
Quand vous utilisez un outil de build comme webpack ou Browserify, le mode production sera déterminé par la valeur de `process.env.NODE_ENV` utilisée dans le code source de Vue, et sera en mode développement par défaut. Ces deux outils fournissent des moyens de surcharger cette variable pour activer le mode production de Vue, et les avertissements seront retirés par le minificateur pendant le build. Tous les templates `vue-cli` sont pré-configurés pour vous, mais il est avantageux de savoir comment cela fonctionne :
18
18
19
19
#### webpack
20
20
21
-
Utiliser le plugin [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) de webpack pour indiquer un environnement en production, ainsi les structures d'avertissement seront ignorées par UglifyJS pendant la minification. Un exemple de configuration :
21
+
Utiliser le plugin [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) de webpack pour indiquer un environnement de production, ainsi les blocs d'avertissements seront ignorés par UglifyJS pendant la minification. Un exemple de configuration :
22
22
23
23
```js
24
24
var webpack =require('webpack')
@@ -38,9 +38,9 @@ module.exports = {
38
38
39
39
#### Browserify
40
40
41
-
- Lancer votre commande d'empaquetage avec la variable d'environnement courante `NODE_ENV`sur `"production"`. Cela informe `vueify` d'éviter d'inclure le code utilisé pour le rechargement à chaud.
41
+
- Lancer votre commande d'empaquetage avec la variable d'environnement `NODE_ENV`assignée à `"production"`. Cela indique à `vueify` d'éviter d'inclure le code utilisé pour le rechargement à chaud ou lié au développement.
42
42
43
-
- Appliquer une transformation [envify](https://github.com/hughsk/envify) globale à votre paquetage. Cela permet au minificateur de retirer tous les avertissements du code source de vue incluent dans la structure conditionnelle relative à la variable `env`. Par exemple :
43
+
- Appliquer une transformation [envify](https://github.com/hughsk/envify) globale à votre paquetage (« bundle »). Cela permet au minificateur de retirer tous les avertissements dans le code source de Vue qui sont entourés d'une instruction conditionnelle sur la variable `env`. Par exemple :
Quand vous utilisez des templates dans le DOM ou dans des chaînes de caractère, une compilation des templates vers les fonctions de rendu est exécuté à la volée. C'est habituellement quelque chose d'assez rapide dans la plupart des cas, mais il vaut mieux l'éviter si la performance de vos applications est quelque chose de critique.
68
+
Quand vous utilisez des templates dans le DOM ou dans des chaînes de caractères en JavaScript, une compilation des templates vers les fonctions de rendu est exécutée à la volée. C'est habituellement assez rapide dans la plupart des cas, mais il vaut mieux l'éviter si la performance de vos applications est quelque chose de critique.
69
69
70
-
La manière la plus simple de pré-compiler les templates est d'utiliser les [composants monofichiers](single-file-components.html). Le build de mise en place associé remplit ce rôle pour vous, aussi le code contenu dans le paquetage est déjà compilé en fonction de rendu au lieu d'être un template de chaîne de caractère.
70
+
La manière la plus simple de pré-compiler les templates est d'utiliser les [composants monofichiers](single-file-components.html). Les outils de build associés effectuent la pré-compilation pour vous, afin que le code produit contienne les fonctions de rendu déjà compilées au lieu des templates en chaînes de caractères à l'état brut.
71
71
72
-
Si vous utilisez webpack, et préférez séparer le JavaScript des fichiers de template, vous pouvez utiliser [vue-template-loader](https://github.com/ktsn/vue-template-loader), qui transforme également les fichiers de template en fonction de rendu pendant la phase de build.
72
+
Si vous utilisez webpack, et préférez séparer le JavaScript des fichiers de template, vous pouvez utiliser [vue-template-loader](https://github.com/ktsn/vue-template-loader), qui transforme également les fichiers de template en fonctions de rendu pendant la phase de build.
73
73
74
-
## Extraction CSS depuis les composants
74
+
## Extraire le CSS des composants
75
75
76
-
Lors de l'utilisation de composants monofichiers, le CSS à l'intérieur du composant est injecté dynamiquement en tant que balise `<style>` via JavaScript. Ceci a un léger coût d'exécution, et si vous utilisez du rendu côté serveur, cela causera le phénomène de FOUC (« flash of unstyled content »). Extraire le CSS depuis tous les composants dans le même fichier évite ces problèmes et mène à une meilleur minification et mise en cache.
76
+
Lors de l'utilisation de composants monofichiers, le CSS à l'intérieur des composants est injecté dynamiquement sous la forme de balises `<style>` via JavaScript. Ceci a un léger coût d'exécution, et si vous utilisez du rendu côté serveur, cela causera le phénomène de FOUC (« Flash Of Unstyled Content »). Extraire le CSS depuis tous les composants dans le même fichier évite ces problèmes et amène à une meilleure minification et mise en cache du CSS.
77
77
78
-
Referez-vous respectivement aux documentations des outils de build pour voir comment obtenir cela :
78
+
Référez-vous aux documentions respectives des outils de build pour voir comment cela est fait :
79
79
80
-
-[webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (le template webpack `vue-cli` a sa propre pré-configuration)
80
+
-[webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (le template webpack `vue-cli` a cela pré-configuré)
Si une erreur d'exécution est levée pendant le rendu d'un composant, elle sera passée à la fonction de configuration globale `Vue.config.errorHandler` si elle a été affectée. C'est toujours une bonne idée de coupler ce hook avec un service de suivie d'erreur comme [Sentry](https://sentry.io), qui fournit [une intégration officielle](https://sentry.io/for/vue/) pour Vue.
86
+
Si une erreur d'exécution est levée pendant le rendu d'un composant, elle sera passée à la fonction de configuration globale `Vue.config.errorHandler` si elle a été affectée. C'est toujours une bonne idée de coupler ce hook avec un service de suivi d'erreur comme [Sentry](https://sentry.io), qui fournit [une intégration officielle](https://sentry.io/for/vue/) pour Vue.
0 commit comments