Vue.js + оптимизация производительности Firebase

Question

Я использую Vue.js + Vuetify.js + Firebase в нашем проекте, и в результате у меня огромные проблемы с показателями производительности в инструменте тестирования Lighthouse.Это примерно так: производительность

Я импортирую только необходимые части клиента Firebase (одна из самых больших частей пакета), но мне нужны почти все из них:

 import firebase from 'firebase/app';
 import 'firebase/firestore';
 import 'firebase/auth';
 import 'firebase/storage';

Я даже переместил firestore в CDN и исключил его из основного комплекта, но это никак не повлияло на показатели.

Вот мой конфиг веб-пакета из vue.config.js:

configureWebpack: {
    output: {
      filename: '[name].[hash].js',
      path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.HashedModuleIdsPlugin()
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      },
    }
  },

С помощью этой конфигурации у меня есть следующая структура пакета:

структура пакета

Я хочу понять правильное направление для повышения производительности.Должен ли я разделить страницы на отдельные файлы комплекта или перейти на другой путь.

Если разделить пакет на страницу, кто-то может предоставить правильный фрагмент кода конфигурации для этого, потому что я нашел множество примеров, но безуспешно.