forked from vuejs/vue-router
-
Notifications
You must be signed in to change notification settings - Fork 2
Traduction de advanced/lazy-loading.md
#10
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
MachinisteWeb
merged 6 commits into
vuejs-fr:working
from
Kocal:advanced/lazy-loading.md
Jun 2, 2017
Merged
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
d1054a6
Traduction de `advanced/lazy-loading.md`
Kocal 742aed5
Modifications suite à la 1ère review de Haeresis
Kocal f4c00cb
Merge branch 'working' into advanced/lazy-loading.md
Kocal 5a0b225
Modifications suite à la 2ème review de Haeresis
Kocal 000350e
Modifications suite à la 3ème review de Haeresis
Kocal 755b935
Merge branch 'working' into advanced/lazy-loading.md
Kocal 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
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,28 +1,27 @@ | ||
# Lazy Loading Routes (En) <br><br> *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/vue-router).* | ||
# Le chargement à la volée | ||
|
||
When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited. | ||
Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquet JavaScript peut devenir un peu lourd, et donc cela peut affecter le temps de chargement de la page. Il serait plus efficace si l'on pouvait séparer chaque composants de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée. | ||
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.
|
||
|
||
Combining Vue's [async component feature](http://vuejs.org/guide/components.html#Async-Components) and Webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-require/), it's trivially easy to | ||
lazy-load route components. | ||
|
||
All we need to do is define our route components as async components: | ||
En combinant la [fonctionnalité de composant asynchrone](https://fr.vuejs.org/v2/guide/components.html#Composants-asynchrones) de Vue et la [fonctionnalité de séparation de code](https://webpack.js.org/guides/code-splitting-require/) de webpack, il est très facile de charger à la volée les composants de route. | ||
|
||
Tout ce que nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones : | ||
|
||
``` js | ||
const Foo = resolve => { | ||
// require.ensure is Webpack's special syntax for a code-split point. | ||
// `require.ensure` est une syntaxe spéciale de webpack pour une séparation de code. | ||
require.ensure(['./Foo.vue'], () => { | ||
resolve(require('./Foo.vue')) | ||
}) | ||
} | ||
``` | ||
|
||
There's also an alternative code-split syntax using AMD style require, so this can be simplified to: | ||
Il y a aussi une alternative à la syntaxe de séparation de code utilisant l'inclusion à la sauce AMD, cela peut être simplifié en : | ||
|
||
``` js | ||
const Foo = resolve => require(['./Foo.vue'], resolve) | ||
``` | ||
|
||
Nothing needs to change in the route config, just use `Foo` as usual: | ||
Rien n'a besoin d'être modifié dans la configuration de la route, utilisez `Foo` comme d'habitude. | ||
|
||
``` js | ||
const router = new VueRouter({ | ||
|
@@ -32,14 +31,14 @@ const router = new VueRouter({ | |
}) | ||
``` | ||
|
||
### Grouping Components in the Same Chunk | ||
### Grouper des composants dans le même fragment | ||
|
||
Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting-require/#chunkname) by providing a chunk name to `require.ensure` as the 3rd argument: | ||
Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même fragment asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [fragments nommés](https://webpack.js.org/guides/code-splitting-require/#chunkname) en donnant un nom au fragment en 3ème argument de `require.ensure`. | ||
|
||
``` js | ||
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') | ||
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') | ||
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') | ||
``` | ||
|
||
Webpack will group any async module with the same chunk name into the same async chunk - this also means we don't need to explicitly list dependencies for `require.ensure` anymore (thus passing an empty array). | ||
webpack groupera tous les modules asynchrones avec le même nom de morceau, dans le même morceau asynchrone. Cela signifie aussi que nous n'avons plus besoin de lister explicitement les dépendances pour `require.ensure` (équivaut à passer un tableau vide). | ||
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.
|
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.
Que pense tu d'aligner nos titres avec le menu, quitte à les raccourcir ?
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.
Ça marche !