forked from vuejs/v2.vuejs.org
-
Notifications
You must be signed in to change notification settings - Fork 103
Traduction de deployment.md
#70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 2 commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,24 @@ | ||
--- | ||
title: Production Deployment Tips (En) | ||
title: Astuces de déploiement en production | ||
type: guide | ||
order: 20 | ||
--- | ||
|
||
## Turn on Production Mode | ||
## Passer en mode production | ||
|
||
<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.</p> | ||
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. | ||
|
||
### Without Build Tools | ||
### Sans outils de build | ||
|
||
If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version (`vue.min.js`) for production. Both versions can be found in the [Installation guide](installation.html#Direct-lt-script-gt-Include). | ||
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). | ||
|
||
### With Build Tools | ||
### Avec outils de build | ||
|
||
When using a build tool like webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. All `vue-cli` templates have these pre-configured for you, but it would be beneficial to know how it is done: | ||
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 : | ||
|
||
#### webpack | ||
|
||
Use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config: | ||
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 : | ||
|
||
``` js | ||
var webpack = require('webpack') | ||
|
@@ -38,17 +38,17 @@ module.exports = { | |
|
||
#### Browserify | ||
|
||
- Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code. | ||
- 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. | ||
|
||
- Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example: | ||
- 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 : | ||
|
||
``` bash | ||
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js | ||
``` | ||
|
||
#### Rollup | ||
|
||
Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace): | ||
Utiliser le plugin [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace): | ||
|
||
``` js | ||
const replace = require('rollup-plugin-replace') | ||
|
@@ -63,24 +63,24 @@ rollup({ | |
}).then(...) | ||
``` | ||
|
||
## Pre-Compiling Templates | ||
## Templates pré-compilés | ||
|
||
When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive. | ||
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. | ||
|
||
The easiest way to pre-compile templates is using [Single-File Components](single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings. | ||
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. | ||
|
||
If you are using webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step. | ||
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. | ||
|
||
## Extracting Component CSS | ||
## Extraire le CSS des composants | ||
|
||
When using Single-File Components, the CSS inside components are injected dynamically as `<style>` tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a "flash of unstyled content". Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching. | ||
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. | ||
|
||
Refer to the respective build tool documentations to see how it's done: | ||
Référez-vous aux documentions respectives des outils de build pour voir comment cela est fait : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Référez-vous aux documentations |
||
|
||
- [webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured) | ||
- [webpack + vue-loader](http://vue-loader.vuejs.org/en/configurations/extract-css.html) (le template webpack `vue-cli` a cela pré-configuré) | ||
- [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction) | ||
- [Rollup + rollup-plugin-vue](https://github.com/znck/rollup-plugin-vue#options) | ||
|
||
## Tracking Runtime Errors | ||
## Suivre les erreurs d'exécution | ||
|
||
If a runtime error occurs during a component's render, it will be passed to the global `Vue.config.errorHandler` config function if it has been set. It might be a good idea to leverage this hook together with an error-tracking service like [Sentry](https://sentry.io), which provides [an official integration](https://sentry.io/for/vue/) for Vue. | ||
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. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
dans le code source de Vue et sera en mode développement
le mode production de Vue et les avertissements seront
Tous les templates
vue-cli
sont pré-configurés pour vous, maisil est avantageuxc'est utile de savoir comment cela fonctionne :There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bon pour moi, je vais utiliser « serait utile » car « would be »
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On peut mettre des virgules avant un "et" pour mieux rythmer la phrase et faciliter la lecture :
Ici c'est la règle 2. conséquence qui s'applique. Je suis d'avis de garder les virgules comme dans le texte original
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bon pour moi
Un tips que j'utilise c'est « ainsi que » ou « ainsi ».
Si tu peux dire « ainsi », alors l'usage de la virgule sera utile.
Si tu peux dire « ainsi que », alors il ne faut pas mettre de virgule.
« Ces deux outils fournissent des moyens de surcharger cette variable pour activer le mode production de Vue ainsi les avertissements seront retirés par le minificateur pendant le build. » => donc virgule utile.
J'ai acheter des carottes, des tomates, des concombre ainsi que des choux. => donc virgule inutile.
Le tips couvre pas la répétition de la conjonction mais elle est assez rare. En général on aura tendance à mettre des virgule avant un et final ou a justement mettre des virgules car et... et... et... c'est trop lourd.