Nuxt.js - the best approach to optimize the webpage ( using purgeCSS, splitchunk, cache, offline )

nuxt.config.js

require('dotenv').config();

module.exports = {
  /*
   ** Headers of the page
   */
  head: {
    htmlAttrs: {
      lang: 'de',
    },
    title: 'moebelland',
    meta: [{
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: 'Nuxt.js project'
      }
    ],
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      },
      {
        rel: 'preconnect',
        href: "https://cdn.jsdelivr.net/",
        crossorigin: true
      },
      {
        rel: 'preconnect',
        href: "https://www.googletagmanager.com/",
        crossorigin: true
      },
      {
        rel: 'preconnect',
        href: "https://www.google-analytics.com/",
        crossorigin: true
      }
    ]
  },
  css: [
    '~/assets/fonts/font.css',
    '~/assets/screen.css'
  ],
  javascript: [
    '~/assets/js/app.min.js',
  ],
  loading: {
    color: '#3B8070'
  },
  dev: false,
  router: {
    // Run the middleware/user-agent.js on every page
    middleware: ['user-agent', 'routing'],
    base: '/'
  },
  render: {
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => {
        const assetsToPush = [];
        preloadFiles
          .map(f => {
            if (f.asType == 'font') {
              assetsToPush.push(`<${publicPath}${f.file}>; rel=prefetch; as=${f.asType}`);
            } else {
              assetsToPush.push(`<${publicPath}${f.file}>; rel=preload; as=${f.asType}`);
            }
          });

        return assetsToPush;
      }

    },
    // https://stackoverflow.com/questions/54083703/nuxt-js-preload-woff-fonts-loaded-as-font-face
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['font'].includes(type)
      }
    }
  },
  build: {
    extractCSS: true,
    splitChunks: {
      pages: true,
      vendor: true,
      commons: true,
      runtime: true,
      layouts: true
    },
    optimization: {
      splitChunks: {
        name: false
      }
    },
    filenames: {
      css: ({
        isDev
      }) => '[contenthash].css',
    },
    publicPath: '/_nuxt/',
    srcDir: '/',
    /*
     ** Run ESLint on save
     */
    extend(config, {
      isDev,
      isClient
    }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        });
      }

    }
  },
  server: {
    host: '0.0.0.0'
  },
  axios: {
    proxyHeaders: false,
    proxy: true,
    credentials: false,
  },
  proxy: {
    '/api/': {
      target: process.env.API_BASE_URL,
      pathRewrite: {
        '^/api/': ''
      },
      changeOrigin: true
    }
  },
  modules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/axios',
    [
      "nuxt-compress",
      {
        gzip: {
          cache: true
        },
        brotli: {
          threshold: 10240
        }
      }
    ],
    'nuxt-purgecss',
    '@nuxtjs/pwa'
  ],
  plugins: [
    '~plugins/profiling',
    '~plugins/api',
    '~plugins/vuency',
    '~plugins/lazyload.js', //Lazy load plugin for image
    '~plugins/autoComplete.js',
    '~plugins/cookieAcceptDecline.js', //cookie Accept and Decline
    '~plugins/vClickOutside.js', //react on clicks outside an element without stopping the event propagation
  ],
  purgeCSS: {
    whitelist: [
      'body',
      'html',
      'nuxt-progress',
      'js',
      'no-touch',
      'rgba',
      'backgroundsize',
      'borderradius',
      'boxshadow',
      'textshadow',
      'cssanimations',
      'cssgradients',
      'csstransitions',
      'fontface',
    ],
    whitelistPatterns: [/cookie\_\_/, /cookie\-/]
  },
  manifest: {
    lang: "de",
    name: "Die sch…",
    scope: "/",
    display: "standalone",
    short_name: "Die sch…",
    theme_color: "transparent",
    description: "Finde aus mehr als 50 Online Shops die schönsten Möbel für Dein Zuhause. ✅ Tolle Designs ✅ Einfache Suche ➡️ Jetzt Dein Lieblingsmöbel finden.",
    orientation: "any",
    background_color: "transparent",
    related_applications: [],
    prefer_related_applications: false,
    icons: [{
        "src": "https://www.demo.de/favicon.ico",
        "sizes": "32x31"
      },
      {
        "src": "https://www.demo.de/favicon.ico",
        "sizes": "32x31"
      }
    ],
    generated: "true"
  },

  workbox: {
    workboxExtensions: '~plugins/pwabuilder-sw.js'
  }
};