web-dev-qa-db-fra.com

Combiner plusieurs fichiers avec Laravel Mix

Je suis actuellement en train de plonger dans Laravel Mix et jusqu'à présent, alors que je comprends parfaitement ce qu'est Laravel Mix et comment cela fonctionne, j'essaie de comprendre un peu plus les pratiques courantes et les "How-Tos" ...

Par exemple, considérez cette structure de fichiers:

/resources/assets/js/app.js (all global functions)
/resources/assets/js/index/index.js (functions specific to index.js)
/resources/assets/js/about/about.js (functions specific to about.js)
/resources/assets/js/contact/contact.js (functions specific to contact.js)

Maintenant, idéalement, je voudrais que les éléments suivants soient combinés et minifiés de la manière suivante:

/public/js/index/index-some_hash.js (including app.js)
/public/js/about/about-some_hash.js (including app.js)
/public/js/contact/contact-some_hash.js (including app.js)

Pour autant que je comprends, la façon d'y parvenir est quelque chose comme ceci:

// Index
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

// About
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js').version();

// Contact
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/contact/contact.js'
], 'public/js/contact/contact.js').version();

Ma question

Je voudrais simplement savoir si ce qui précède est la bonne méthode pour faire ce que j'essaie de faire? Existe-t-il de meilleurs moyens ou des moyens plus courants d'y parvenir?

Si la structure ci-dessus est incorrecte et qu'il existe d'autres façons de combiner mes fichiers, veuillez partager vos connaissances. Cependant, à moins qu'il n'y ait une très bonne raison, je voudrais éviter ce qui suit:

  • Servant deux fichiers distincts pour chaque page, c'est-à-dire app.min.js et index.min.js. Cela nécessite deux recherches par page, idéalement elle devrait être aussi réduite que possible
  • Servir le même fichier à TOUTES les pages de mon site. Servir du code sur une page qui ne va pas l'utiliser est un gaspillage de ressources, quelle que soit la mise en cache ...

Une idée ...

J'ai remarqué une ligne de code dans l'un des fichiers JS; require('./bootstrap');. Appelez-moi à l'ancienne mais je n'ai jamais vu cela en JavaScript (je suppose que c'est de node.js). Cela dit, il s'agit évidemment de charger le fichier bootstrap.js En tant que dépendance dans le fichier spécifique. Donc, dans cet esprit, la solution suivante serait-elle meilleure:

about.js 

require('./app'); // Include global functions

// Do some magic here specifically for the 'about' page...

webpack.mix.js: 

mix.js(['resources/assets/js/*/*.js'); // For all pages

Si c'est une meilleure solution, comment puis-je également inclure des fichiers à l'aide de SASS? Existe-t-il des moyens d'améliorer ce qui précède?

node.jslaravelgulplaravel-elixirlaravel-mix
13
Ben Carey

Je dirais qu'il y a 3 choses principales que vous devez considérer ici (elles ne sont pas toutes égales):

  • Taille - La quantité d'espace que vos ressources vont occuper et la taille des fichiers en cours de téléchargement.
  • Nombre de demandes - Combien de fichiers sont chargés dans la page.
  • Cache du navigateur - Les fichiers seront extraits du cache plutôt que du serveur.

Dans votre situation particulière, cela dépend de la taille de votre fichier app.js, De la taille de vos fichiers spécifiques à la page sans le code du code de app.js, Du nombre de fichiers spécifiques à la page que vous avoir et si vous utilisez certaines des mêmes ressources dans votre fichier différent, par exemple nécessitant les mêmes packages dans les différents fichiers.

Un fichier

Si vos fichiers spécifiques à une page sont assez petits, je les inclurais simplement dans votre fichier app.js Principal:

require('./index/index')
require('./about/about')
//etc

webpack.mix.js:

.js('resources/assets/js/app.js', 'public/js')

Cela signifierait que vous ne stockez qu'un seul fichier compilé sur votre serveur, une seule demande est effectuée pour votre javascript et il doit être mis en cache pour chaque chargement de page suivant sur le site.

Un fichier principal et un fichier spécifique à la page

Si vous avez un grand nombre de fichiers spécifiques à une page ou si vos fichiers spécifiques à une page ne sont pas si petits, je vous suggère de compiler votre app.js Indépendamment de vos fichiers spécifiques à une page. N'oubliez pas de comparer les résultats de cette approche avec l'approche Un fichier comme l'approche Un fichier l'approche pourrait être encore plus efficace.

webpack.min.js

.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/index/index.js', 'public/js/index')
.js('resources/assets/js/about/about.js', 'public/js/about')

Cela signifie que la majeure partie de votre code (app.js) Sera toujours mise en cache et qu'une seule demande est effectuée pour le code spécifique à la page (qui devrait ensuite être mis en cache pour chaque chargement ultérieur de cette page).

Veuillez noter que si vous avez besoin de packages dans votre fichier app.js Et dans un fichier spécifique à une page, ils ne seront pas partagés entre les 2, ce qui augmentera la taille globale de ces demandes. Les packages pouvant être ajoutés à l'objet window (par exemple jQuery) ne doivent être inclus que dans votre app.js.

Un fichier principal et un fichier spécifique de quelques pages

Si vous avez un ou deux fichiers spécifiques à une page qui sont assez volumineux mais que le reste ne l'est pas, vous pouvez compiler la majorité de vos fichiers spécifiques à une page dans app.js Et faire en sorte que les plus gros soient compilés dans leurs propres fichiers.

Tous les fichiers spécifiques à la page

Je n'irais dans cette voie que si tous les fichiers spécifiques à votre page sont assez volumineux, votre fichier app.js N'était pas si gros et le code/la logique dans vos fichiers spécifiques à la page ne pouvait pas être refactorisé afin qu'il puisse être partagé entre différents fichiers.

Cette manière serait similaire à l'exemple de votre question, au lieu d'avoir:

webpack.min.js

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

tu aurais:

ressources/actifs/js/index/index.js

require('../app.js')

//rest of file

webpack.min.js

mix.js('resources/assets/js/index/index.js', 'public/js/index/index.js').version();

Je n'atteindrais jamais cette approche tout de suite et il y a très peu de situations où elle serait la plus efficace.

Résumé

J'atteindrais toujours l'approche One File et j'essaierais ensuite d'optimiser plus tard (à moins que quelque chose ne suce vraiment pendant le développement) car une optimisation prématurée peut conduire à une odeur de code et une maintenabilité plus difficile.

Cela pourrait aussi être un bon article pour vous https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2 -437c37efe3ff

J'espère que cela t'aides!

12
Rwd