From d1054a6422f73e9b061210a3234b023ce0e5ec87 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 24 May 2017 16:31:33 +0200 Subject: [PATCH 1/4] Traduction de `advanced/lazy-loading.md` --- docs/en/SUMMARY.md | 2 +- docs/en/advanced/lazy-loading.md | 23 +++++++++++------------ 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index b318f5244..72bb1c57b 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -21,7 +21,7 @@ - [Transitions (En)](advanced/transitions.md) - [Data Fetching (En)](advanced/data-fetching.md) - [Scroll Behavior (En)](advanced/scroll-behavior.md) - - [Lazy Loading (En)](advanced/lazy-loading.md) + - [Le chargement à la volée](advanced/lazy-loading.md) - Réference de l'API - [router-link (En)](api/router-link.md) - [router-view (En)](api/router-view.md) diff --git a/docs/en/advanced/lazy-loading.md b/docs/en/advanced/lazy-loading.md index f79b4fc8f..f32d8be7d 100644 --- a/docs/en/advanced/lazy-loading.md +++ b/docs/en/advanced/lazy-loading.md @@ -1,28 +1,27 @@ -# Lazy Loading Routes (En)

*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).* +# Les Routes chargeant à 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 « bundler », le paquet JavaScript peut devenir un peut lourd, et donc cela peut affecter le temps de chargement de page. Il serait plus efficace si l'on pouvait séparer chaque composants de route dans des fragments séparés, et de ne les charger uniquement lorsque la route est visitée. -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](http://vuejs.org/guide/components.html#Async-Components) 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 dont 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,9 +31,9 @@ const router = new VueRouter({ }) ``` -### Grouping Components in the Same Chunk +### Grouper des composants dans le même morceau -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 morceau asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [morceaux nommés](https://webpack.js.org/guides/code-splitting-require/#chunkname) en donnant un nom au morceau en 3ème argument de `require.ensure`. ``` js const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') @@ -42,4 +41,4 @@ 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). From 742aed5ee062f77a74d1e33d9a517894bf1468cb Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 27 May 2017 16:37:47 +0200 Subject: [PATCH 2/4] =?UTF-8?q?Modifications=20suite=20=C3=A0=20la=201?= =?UTF-8?q?=C3=A8re=20review=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/advanced/lazy-loading.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/en/advanced/lazy-loading.md b/docs/en/advanced/lazy-loading.md index f32d8be7d..537c571d8 100644 --- a/docs/en/advanced/lazy-loading.md +++ b/docs/en/advanced/lazy-loading.md @@ -1,14 +1,14 @@ -# Les Routes chargeant à la volée +# Le chargement à la volée -Pendant la construction d'applications avec un « bundler », le paquet JavaScript peut devenir un peut lourd, et donc cela peut affecter le temps de chargement de page. Il serait plus efficace si l'on pouvait séparer chaque composants de route dans des fragments séparés, et de ne les charger uniquement lorsque la route est visitée. +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 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. -En combinant la [fonctionnalité de composant asynchrone](http://vuejs.org/guide/components.html#Async-Components) 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. +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 dont nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones : ``` js const Foo = resolve => { - // require.ensure est une syntaxe spéciale de Webpack pour une séparation de code. + // `require.ensure` est une syntaxe spéciale de webpack pour une séparation de code. require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) @@ -31,9 +31,9 @@ const router = new VueRouter({ }) ``` -### Grouper des composants dans le même morceau +### Grouper des composants dans le même fragment -Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même morceau asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [morceaux nommés](https://webpack.js.org/guides/code-splitting-require/#chunkname) en donnant un nom au morceau en 3ème argument de `require.ensure`. +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') @@ -41,4 +41,4 @@ const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') ``` -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). +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). From 5a0b22501fe1e9c6db9e511ea6f541e60fe2cdac Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 27 May 2017 20:41:41 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Modifications=20suite=20=C3=A0=20la=202?= =?UTF-8?q?=C3=A8me=20review=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/advanced/lazy-loading.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/advanced/lazy-loading.md b/docs/en/advanced/lazy-loading.md index 537c571d8..c98080454 100644 --- a/docs/en/advanced/lazy-loading.md +++ b/docs/en/advanced/lazy-loading.md @@ -1,10 +1,10 @@ # Le chargement à la volée -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 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. +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. 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 dont nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones : +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 => { @@ -41,4 +41,4 @@ const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') ``` -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). +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). From 000350ea567be015e9d029086ee28f6a40dc1b8c Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 2 Jun 2017 08:46:56 +0200 Subject: [PATCH 4/4] =?UTF-8?q?Modifications=20suite=20=C3=A0=20la=203?= =?UTF-8?q?=C3=A8me=20review=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/advanced/lazy-loading.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/advanced/lazy-loading.md b/docs/en/advanced/lazy-loading.md index c98080454..989dcbd17 100644 --- a/docs/en/advanced/lazy-loading.md +++ b/docs/en/advanced/lazy-loading.md @@ -1,6 +1,6 @@ # Le chargement à la volée -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. +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. 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. @@ -41,4 +41,4 @@ const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') ``` -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). +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).