Skip to content

Commit 592adf4

Browse files
Merge pull request #10 from Kocal/advanced/lazy-loading.md
Traduction de `advanced/lazy-loading.md`
2 parents f10d5b3 + 755b935 commit 592adf4

File tree

2 files changed

+12
-13
lines changed

2 files changed

+12
-13
lines changed

docs/en/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
- [La récupération de données](advanced/data-fetching.md)
2323
- [Les transitions](advanced/transitions.md)
2424
- [Comportement du défilement](advanced/scroll-behavior.md)
25-
- [Lazy Loading (En)](advanced/lazy-loading.md)
25+
- [Le chargement à la volée](advanced/lazy-loading.md)
2626
- Réference de l'API
2727
- [router-link](api/router-link.md)
2828
- [router-view](api/router-view.md)

docs/en/advanced/lazy-loading.md

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
# 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).*
1+
# Le chargement à la volée
22

3-
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.
3+
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 composant de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée.
44

5-
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
6-
lazy-load route components.
7-
8-
All we need to do is define our route components as async components:
5+
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.
6+
7+
Tout ce que nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones :
98

109
``` js
1110
const Foo = resolve => {
12-
// `require.ensure` is webpack's special syntax for a code-split point.
11+
// `require.ensure` est une syntaxe spéciale de webpack pour une séparation de code.
1312
require.ensure(['./Foo.vue'], () => {
1413
resolve(require('./Foo.vue'))
1514
})
1615
}
1716
```
1817

19-
There's also an alternative code-split syntax using AMD style require, so this can be simplified to:
18+
Il y a aussi une alternative à la syntaxe de séparation de code utilisant l'inclusion à la sauce AMD, cela peut être simplifié en :
2019

2120
``` js
2221
const Foo = resolve => require(['./Foo.vue'], resolve)
2322
```
2423

25-
Nothing needs to change in the route config, just use `Foo` as usual:
24+
Rien n'a besoin d'être modifié dans la configuration de la route, utilisez `Foo` comme d'habitude.
2625

2726
``` js
2827
const router = new VueRouter({
@@ -32,14 +31,14 @@ const router = new VueRouter({
3231
})
3332
```
3433

35-
### Grouping Components in the Same Chunk
34+
### Grouper des composants dans le même fragment
3635

37-
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:
36+
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`.
3837

3938
``` js
4039
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
4140
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
4241
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
4342
```
4443

45-
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).
44+
webpack groupera tous les modules asynchrones avec le même nom de fragment, dans le même fragment asynchrone. Cela signifie aussi que nous n'avons plus besoin de lister explicitement les dépendances pour `require.ensure` (équivaut à passer un tableau vide).

0 commit comments

Comments
 (0)