Kombinieren Mehrerer Dateien mit Laravel Mix

Ich bin derzeit in den Prozess des Tauchens in Laravel Mischen und so weit, während ich voll verstehen, was Laravel-Mix ist und wie es funktioniert, bin ich versucht zu verstehen, ein wenig mehr über die gängigen Praktiken und 'How-Tos'...

Bedenken Sie zum Beispiel, diese Datei-Struktur:

/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)

Nun, im Idealfall würde ich wie folgt zusammengefasst und minified in der folgenden Weise:

/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)

Soweit ich das verstanden habe, ist der Weg, um dies zu erreichen, ist so etwas wie die folgenden:

//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();

Meine Frage

Ganz einfach, ich würde gerne wissen, ob die oben genannten ist die richtige Methode, das zu tun, was ich versuche zu tun? Gibt es bessere Möglichkeiten, oder mehr gemeinsame Wege, dies zu erreichen?

Wenn die oben genannten Struktur ist falsch und es gibt andere Möglichkeiten meine Dateien kombiniert werden sollen, dann bitte teilt euer wissen. Jedoch, es sei denn, es gibt einen sehr guten Grund, ich möchte Folgendes vermeiden:

  • Dienen zwei separate Dateien für jede Seite, d.h. app.min.js und index.min.js. Dies erfordert zwei lookups pro Seite, es sollte im Idealfall so wenig wie möglich
  • Mit der gleichen Datei, die ALLE Seiten auf meiner Website. Servieren code zu einer Seite, die nicht geht, es zu benutzen ist eine Verschwendung von Ressourcen, unabhängig von caching...

Eine Idee...

Bemerkte ich eine Zeile code in einer der JS Dateien; require('./bootstrap');. Nennen Sie mich altmodisch, aber ich habe nie gesehen, diese in JavaScript (ich nehme an es ist aus node.js). Das heißt, offensichtlich ist es nur das laden der bootstrap.js - Datei mit einer Abhängigkeit, die in der bestimmten Datei. So, mit diesem hintergrund, wäre die folgende Lösung besser:

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

Wenn dies eine bessere Lösung ist dann, wie füge ich Dateien mit SASS-wie auch? Welche Möglichkeiten gibt es, die oben erwähnt sind, können verbessert?

  • ich denke, dass sass hat import Aussage, die sich wie require in javascript
  • Perfekt ist, bedeutet das, dass meine "möglichen" Lösung ist besser als die erste?
  • Der einzige Unterschied, den ich sehen konnte, ist eine schlanke mix - Datei.
  • Okay, was ich meine ist, wird die zweite Lösung funktioniert und ist es, wie Sie würde Ihnen raten, dies zu tun? Ich versuche zu lernen, was die best practices sind für die Verwendung von Laravel-Mix. Ich habe gesucht alle über das Internet und während ich voll verstehen, was Laravel-Mix ist, ich möchte verstehen, wie am besten, es zu benutzen...
  • Die zweite Lösung funktioniert. Mit require ist nodejs Weg, der das Modul geladen wird. webpack hinzufügen einer poly-Füllung für require Methode oder fügen Sie den code in app.js alle separaten .js Dateien (ich bin nicht sicher, welcher Ansatz webpack tatsächlich verwendet.) Beim Aufruf der zweiten Lösung als better one ist völlig subjektiv für jede person individuelle Vorlieben.
  • I am trying to learn what the best practices are for using Laravel Mix. Die beste Praxis von Laravel-Mix ist bereits in der Dokumentation. Ich denke, Sie sind auf der Suche verschiedene Arten von Implementierungen in javascript. Derzeit haben Sie vanila js, die alle Browser verstehen, also würde ich empfehlen, tun dieser als re-Implementierung von javascript in verschiedenen Stil
  • Okay, vielen Dank @CerlinBoss

InformationsquelleAutor Ben Carey | 2017-03-06
  1. 12

    Ich würde sagen, es gibt 3 wichtigsten Dinge, die Sie haben, zu betrachten hier (Sie sind nicht alle gleich):

    • Größe - Der Speicherplatz, den Ihre Ressourcen gehen zu nehmen und die Dateigröße, die heruntergeladen werden.
    • Anzahl der Anfragen - Wie viele Dateien geladen werden, die in der Seite.
    • Browser-Cache - Dateien werden aus dem cache abgerufen, anstatt die server.

    In Ihrer speziellen situation würde es davon abhängen, wie groß Ihre app.js Datei ist auf seine eigene, wie groß Ihre Seite bestimmte Dateien wäre ohne den code der code aus app.js, wie viele Seiten-spezifischen Dateien, die Sie haben und wenn Sie verwenden einige der gleichen Ressourcen in verschiedenen Datei-z.B. erfordert die gleiche Paket - (s) in den verschiedenen Dateien.

    Eine Datei

    Wenn Ihre Seite bestimmte Dateien relativ klein sind, dann würde ich nur enthalten Sie in Ihrem Haupt - app.js Datei:

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

    webpack.mix.js:

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

    Dies würde bedeuten, dass man nur die Lagerung eine kompilierte Datei auf Ihrem server nur eine Anfrage gemacht wird, ist für Ihre javascript-und es sollte zwischengespeichert werden, für jedes weitere laden der Seite über den Ort.

    Eine main-Datei und eine Seite bestimmte Datei

    Wenn Sie eine große Anzahl von Seite, bestimmte Dateien oder Ihre Seite, bestimmte Dateien nicht zu klein ist, dann würde ich vorschlagen, dass das kompilieren Ihrer app.js unabhängig von Ihrer Seite bestimmte Dateien. Vergessen Sie nicht, vergleichen Sie die Ergebnisse dieses Ansatzes mit den Eine Datei Ansatz als die Eine Datei Ansatz könnte noch effizienter sein.

    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')

    Dies bedeutet, dass der Hauptteil des Codes (app.js) wird noch immer zwischengespeichert und, dass nur eine Anfrage gemacht wird, für die Seite spezifischen code (das sollte dann der cache für jede weitere laden der Seite).

    Bitte beachten Sie, dass wenn Sie sind, die Pakete in beide Ihre app.js Datei und Seite bestimmte Datei, die Sie nicht geteilt werden, über die 2 so wird es eine Erhöhung der Gesamt-Größe für solche Anfragen. Pakete, die Hinzugefügt werden können, um die window Objekt (z.B. jQuery) sollten nur aufgenommen werden, in Ihrer app.js.

    Eine main-Datei und ein paar Seite bestimmte Datei

    Wenn Sie eine oder zwei Seite, bestimmte Dateien, die ziemlich groß, aber den rest bist du nicht kompilieren konnte, die Mehrheit auf Ihrer Seite, bestimmte Dateien in app.js und haben die größeren kompilieren Sie Ihre eigenen Dateien.

    Alle Seiten-spezifischen Dateien

    Ich würde erst diesen Weg gehen, wenn alle deine Seite bestimmte Datei ziemlich groß sind, Ihre app.js Datei nicht so groß ist und der code/Logik auf Ihrer Seite, bestimmte Dateien konnte nicht umgestaltet werden, so dass es könnte geteilt werden in verschiedenen Dateien.

    Diese Weise würde in etwa wie in Ihrer Frage, aber, statt:

    webpack.min.js

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

    müssten Sie:

    resources/assets/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();

    Ich nie erreichen würden für diesen Ansatz sofort, obwohl, und es gibt nur sehr wenige Situationen, in denen wäre es am effektivsten ist.

    Zusammenfassung

    Ich würde immer zu erreichen für die Eine Datei Ansatz und betrachten die Optimierung später (es sei denn, etwas wirklich zu saugen während der Entwicklung) als vorzeitige Optimierung führen kann code smell und härter Wartbarkeit.

    Könnte dies ein guter Artikel für Sie https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff

    Hoffe, das hilft!

    • wäre das nicht eine js-Datei Probleme verursachen, da die js benötigen würde, um die Last in Folge?
    • Ich hatte noch nie ein Problem mit ihm.
    InformationsquelleAutor Rwd
Schreibe einen Kommentar