Skip to content

Commit dcdd136

Browse files
committed
Ajout des modifications apportées par Sylvain
Signed-off-by: Bruno Lesieur <[email protected]>
1 parent b50d897 commit dcdd136

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

src/v2/guide/deployment.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
2-
title: Astuce de déploiement en production
2+
title: Astuces de déploiement en production
33
type: guide
44
order: 20
55
---
66

77
## Passer en mode production
88

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.
1010

1111
### Sans outils de build
1212

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).
1414

1515
### Avec outils de build
1616

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 :
1818

1919
#### webpack
2020

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 :
2222

2323
``` js
2424
var webpack = require('webpack')
@@ -38,9 +38,9 @@ module.exports = {
3838

3939
#### Browserify
4040

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.
4242

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 :
4444

4545
``` bash
4646
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
@@ -65,22 +65,22 @@ rollup({
6565

6666
## Templates pré-compilés
6767

68-
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.
6969

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.
7171

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.
7373

74-
## Extraction CSS depuis les composants
74+
## Extraire le CSS des composants
7575

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.
7777

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 :
7979

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é)
8181
- [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction)
8282
- [Rollup + rollup-plugin-vue](https://github.com/znck/rollup-plugin-vue#options)
8383

8484
## Suivre les erreurs d'exécution
8585

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 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

Comments
 (0)