Skip to content

Conversation

@MachinisteWeb
Copy link
Member

Go les assets

Signed-off-by: Bruno Lesieur <[email protected]>
## Avec webpack

By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as `<img src="...">`, `background: url(...)` and CSS `@import` are resolved as module dependencies.
Par défaut, [vue-loader](http://vue-loader.vuejs.org/en/) traite automatiquement vos fichiers de style et vos templates à l'aide de `css-loader` et du compilateur de template de Vue. Dans ce processus de compilation, toutes les URL des fichiers comme `<img src="...">`, `background: url(...)` et les CSS `@import` sont résolus en tant que dépendances des modules.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"vos fichiers de styles"

- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.
Leurs avantages sont:
- file-loader vous laisse définir ou copier les ressources, comment les nommer et vous permet d'utiliser des hashs de version pour un meilleur cache.
- url-loader vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodé en base 64 si sa taille est inférieure à un seuil donné. Cela peut réduire un certain nombre de demandes HTTP pour les fichiers triviaux. Si la taille du fichier est supérieur au seuil, il retombe automatiquement sur file-loader.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"URL encodée"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dans tout les projets Vue nous utilisons la voie masculine pour un URL à savoir, un Uniform Resource Locator, c.-à-d. un localisateur uniforme de ressource.

URL est invariable en français aussi URLs n'est pas valide. Par contre une URL n'est pas faux du tout car le genre est « hésitant ». C'est juste qu'on prend le parti masculin, je pense continuer ainsi pour Nuxt.
https://fr.wiktionary.org/wiki/URL

Idem nous utilisons le terme la SEO pour la Search Engine Optimization soit l'optimisation pour moteur de recherche.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Et oui à l'orale je dis une URL et une Game Cube. Je fais des efforts tout de même pour rectifier ça :D

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je t'avoue que j'utilise également le féminin pour URL (et pour Game Cube ^^).

Utilisons URL au masculin alors (et je me ferais au terme féminin SEO)

Copy link
Member Author

@MachinisteWeb MachinisteWeb Sep 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

D'après un sondage Twitter seulement 20% des sondés disent la SEO. Moi ce qui m'a étonné c'est que quand même 20% disaient la SEO XD. Mais c'est histoire d'être consistant avec moi même. Je peux pas décemment continuer à dire un SEO alors que je dis une SPA.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

D'après un sondage Twitter seulement 20% des sondé disent la SEO. Moi ce qui m'a étonné c'est que quand même 20% disait la SEO XD

Ahahahah exact. Bon du coup celui-ci c'est ok!

- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.
Leurs avantages sont:
- file-loader vous laisse définir ou copier les ressources, comment les nommer et vous permet d'utiliser des hashs de version pour un meilleur cache.
- url-loader vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodé en base 64 si sa taille est inférieure à un seuil donné. Cela peut réduire un certain nombre de demandes HTTP pour les fichiers triviaux. Si la taille du fichier est supérieur au seuil, il retombe automatiquement sur file-loader.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'accorderais "taille" et "supérieur" -> "Si la taille du fichier est supérieure"

```

If you want to update these loaders or disable them, please use [build.extend](/api/configuration-build#extend).
Si vous désirez modifier ou désactiver ces loaders, consultez la documentation sur [La propriété `extend`](/api/configuration-build#extend).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"[la propriété extend]"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'utilise la norme que nous avons établie ce matin même. La page aura pour titre « La propriété extend » donc majuscule. (Tu te souviens Mises en page et Vue) ;)

Copy link

@rspt rspt Sep 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oui, et j'ai été voir la section qui s'appelle uniquement extend non? ^^

Ou tu projettes de changer le nom de la section?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Est-ce qu'on utiliserait pas plutôt "[la propriété extend de la page Propriété]" dans ce cas?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Autant pour moi

Cette option est utile pour les fichiers tels que `robots.txt`, `sitemap.xml` ou `CNAME` (pour les pages hébergées sur GitHub par ex.).

From your code you can then reference those files with `/` URLs:
À partir de votre code vous pouvez ensuite référencer ces fichiers avec de URL commencant par `/` :
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"de URL"?

Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
Signed-off-by: Bruno Lesieur <[email protected]>
@rspt rspt mentioned this pull request Sep 18, 2017
@MachinisteWeb
Copy link
Member Author

Merci pour ta revue et ton œil vif @rspt ! C'est tout bon normalement.

Copy link

@forresst forresst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 petites remarques

```

Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you.
Puisque que les fichiers `.png` ne sont pas des fichiers JavaScript, Nuxt.js configure webpack afin d'utiliser [file-loader](https://github.com/webpack/file-loader) et [url-loader](https://github.com/webpack/url-loader) afin de pouvoir s'en charger.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nuxt.js configure webpack afin d' pour utiliser file-loader et url-loader afin de pouvoir s'en charger à votre place.

cela permet d'éviter la répétition de "afin"

Ce qui signifie que tous les fichiers inférieurs à 1ko seront intégrés comme URL base-64. Sinon, l'image / police sera copiée dans son dossier correspondant (dans le répertoire `.nuxt`) avec un nom contenant des hashs de version pour une meilleure mise en cache.

When launching our application with `nuxt`, our template in `pages/index.vue`:
Lors du lancement de notre application avec `nuxt`, notre modèle dans `pages/index.vue` :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modèle => template

je laisserai "template" puisque c'est la balise dans le fichier .vue

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tout à fait !

Signed-off-by: Bruno Lesieur <[email protected]>
@MachinisteWeb
Copy link
Member Author

Merce @forresst ! Bon pour merge ?

@forresst
Copy link

C'est bon pour moi 👏

@MachinisteWeb MachinisteWeb merged commit 8ebede5 into working Sep 20, 2017
@MachinisteWeb MachinisteWeb deleted the assets branch September 20, 2017 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants