Seite 4: Erweiterung mit Plug-ins

Inhaltsverzeichnis

Für Nuxt.js gibt es ein Ökosystem mit Plug-ins. Eines dieser Plug-ins erzeugt eine Sitemap. Eine erste minimale Konfiguration, die für alle statischen Routen der Anwendung eine Sitemap erstellt, sieht wie folgt aus:

$ yarn add --dev @nuxtjs/sitemap

{
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://example.com'
  }
}

Mehr ist nicht notwendig, um ein Plug-in in Nuxt.js einzubinden. Die Awesome Nuxt.js List bietet einen Überblick über die verschiedenen Erweiterungen, die das Core-Team und die Community bereitstellen.

Reduzierung von Datenmenge und Ladezeit

Beim Pre-Rendering sendet der Server zu Beginn der Seite das CSS. Standardmäßig schickt Nuxt.js das komplette referenzierte CSS der Seite mit. Wenn die Seite ein CSS-Framework verwendet, so nutzen die Seiten meist nur einen Teil des CSS. Damit Nuxt.js nur das notwendige CSS mitschickt, existieren verschiedene Bibliotheken, die die Anwendung nach verwendeten CSS-Klassen analysieren. Eine davon ist Purgecss, für das es ein fertiges Nuxt.js-Modul gibt. Entwickler können es wie folgt installieren:

$ yarn add --dev nuxt-purgecss

Danach können sie das PurgeCSS-Plug-in im postcss-Modus aktivieren:

{
  modules: [
    'nuxt-purgecss',
  ],
  purgeCSS: {
    mode: 'postcss',
    whitelist: ['html', 'body', 'has-navbar-fixed-top', 'nuxt-link-exact-active', 'nuxt-progress'],
    enabled: true // for fast enabling also in dev mode to check whitelist
  }
}<

Wie im Listing dargestellt, akzeptiert die Erweiterung als Parameter eine Whitelist für Klassen, die nicht explizit in den Quelldateien vorkommen. Beispiele für solche Klassen sind Parameter in der Konfiguration in nuxt-config.js oder Klassen wie nuxt-link-exact-active und nuxt-progress, die eingebundene Frameworks setzen.

Direktes Einbinden von webpack-Plug-ins

Entwickler können über die Konfigurationsdatei auch den webpack-Build-Prozess erweitern. Die folgenden Schritte binden das Webpack Plug-in responsive-loader ein, das Grafiken skalieren und minifizieren kann. Das Beispiel zeigt, wie flexibel der Nuxt.js-Build-Prozess erweiterbar ist, auch wenn kein fertiges Plug-in im Nuxt.js-Ökosystem existiert.

build: {
  extend(config, {isDev, isClient}) {
    // adding the new loader as the first in the list
    config.module.rules.unshift({
      test: /\.(png|jpe?g|gif)$/,
      use: {
        loader: 'responsive-loader',
        options: {
          // disable: isDev,
          placeholder: true,
          quality: 85,
          placeholderSize: 30,
          name: 'img/[name].[hash:hex:7].[width].[ext]',
          adapter: require('responsive-loader/sharp')
        }
      }
    })
    // remove old pattern from the older loader
    config.module.rules.forEach(value => {
      if (String(value.test) === String(/\.(png|jpe?g|gif|svg|webp)$/)) {
        // reduce to svg and webp, as other images are handled above
        value.test = /\.(svg|webp)$/
        // keep the configuration from image-webpack-loader here unchanged
      }
    })
  }
}