Webpack Codespliting

Webpack Version 2

Wenn sich die Anwendung ändert, wird der komplette Code neu verarbeitet, obwohl sich große Teile nicht geändert haben. Da die Datei anschließend eine neue Signatur hat, kann der Webseitenbesucher diese nicht aus seinem Browser Cache (Longtime Cache) nutzen sondern muss die Datei komplett neu herunterladen.

Unter HTTP/1.1 durfte maximal eine Datei gleichzeitig geladen werden. So wurde der HTML Code, JS, CSS und Bilder nacheinander geladen. Mit HTTP/2 kann durch das multiplexing über die selbe Verbindung mehrere Dateien parallel heruntergeladen werden. Dies gibt einen deutlichen Performance Vorteil bei kleinen Dateien.

Ich nutze den Wrapper Laravel-Mix als Standalone. Seit Version 5.4 ist das Modul auch in Laravel enthalten. Vorteil zu Webpack ist, dass viel vor dem User versteckt wird. In der webpack.mix.js wird Laravel Mix konfiguriert.

Vendor Spliting link

Beim Vendor Spliting ist die Idee, Module und Abhängigkeiten vom Applikationscode zu trennen.

let mix = require('laravel-mix')

mix.js(
  'resources/assets/scripts/app.js',
  'public/build/js'
).extract(['vue', 'axios', 'vuex', 'vee-validate'])

Durch das hinzufügen der extract Methode mit den auszulagernden Modulen werden nach dem bauen aus einer Datei 3 Stück.

• app.js Application Code
• vendor.js Vendor Libraries
• manifest.js Webpack Runtime

Alle 3 Dateien müssen auf der Webseite eingebunden werden.

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Code Spliting link

SinglePageApplications oder große Anwendungen kämpfen mit dem Problem, dass der Anwender beim Laden der Webseite die komplette Anwendung herunterladen muss. Eine Möglichkeit hierfür ist das dynamische Laden. Dabei werden z.B. VueJS Componenten per AJAX nachgeladen, wenn diese das erste mal verwendet werden.

// Vorher
Vue.component('my-component', MyComponent)

// Nachher
Vue.component('my-component', (resolve) => {
  import('./MyComponent' /* webpackChunkName: "/js/my_component" */)
    .then(resolve)
})

Der Kommentar webpackChunkName muss leider für Webpack an diese Stelle. Er bestimmt wo und mit welchem Namen die Datei erzeugt wird. Webpack sollte nun zwei Chunks erzeugen. Die dynamischen Module müssen nicht auf der Webseite eingebunden werden.

Weitere Beispiele und Erklärungen vuejsdevelopers.com.