Vue.js-Komponenten dynamisch laden

Beim Arbeiten mit einer Vue.js-Anwendung kommt es vor, dass du Komponenten abhängig von einer bestimmten Logik dynamisch laden musst.

In solchen Fällen greift man oft zur gewohnten Variante:

<template>
  <foo-component v-if="loadComponent === 'foo'" />
  <bar-component v-else-if="loadComponent === 'bar'" />
  <baz-component v-else />
</template>

<script>
import { FooComponent, BarComponent, BazComponent } from '@sample/package'

export default {
  components: {
    FooComponent,
    BarComponent,
    BazComponent,
  },

  props: ['loadComponent'],
}
</script>

An diesem Muster ist grundsätzlich nichts falsch, aber man sieht: Je mehr Bedingungen hinzukommen, desto unübersichtlicher wird das Template. Es gibt einen eleganteren Weg.

Komponenten dynamisch laden

Versuchen wir dasselbe mit einem anderen Ansatz. Mithilfe von Webpack Code Splitting können wir Vue-Komponenten dynamisch importieren. Hier ein Beispiel:

<template>
  <component :is="loadedComponent" />
</template>

<script>
export default {
  props: ['loadComponent'],

  computed: {
    loadedComponent() {
      let component = 'BazComponent'

      if (this.loadComponent === 'foo') {
        component = 'FooComponent'
      } else if (this.loadComponent === 'bar') {
        component = 'BarComponent'
      }

      return defineAsyncComponent(() => import(`@sample/package/${component}`))
    }
  }
}
</script>

Das ist zwar nur eine andere Herangehensweise, aber wir profitieren dabei vom Code Splitting in Webpack und verlagern alle Bedingungen vom Template- in den Script-Block.

Wichtig zu wissen: Webpack veröffentlicht beim Build standardmäßig alle Dateien im Verzeichnis @sample/package als separate Chunks in deinem Ausgabeverzeichnis. Bei 900 Dateien werden also auch 900 Dateien ausgegeben.

Um das zu vermeiden, kannst du den Import mit Webpacks Magic Comments gezielt einschränken.