Nuxtjs + Vuetify + Purgecss

Question

Seeing as Vuetify adds around 300-340kb worth of icons when using icons: 'mdi' with the nuxt@vuetify-module, I've found answers indicating that purgeCSS is a good solution to shave off the unnecessary and unused icons.

I initially imported the icons manually from 'mdi/font' but quickly realized this was a very ineffective solution because it forced me to constantly come up with solutions of adding the icons manually to components.

I can't seem to get purgecss to remove the icons though (which is the most important to me).

I installed "@nuxtjs/vuetify": "^1.11.3", I installed "nuxt-purgecss": "^1.0.0", I installed "@mdi/font": "^5.9.55",

Looking at this answer I tried to create my settings why do i see vuetify css in view source? They also discuss it here: https://github.com/vuetifyjs/vuetify/issues/7265

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    defaultAssets: {
      font: {
        family: 'Ubuntu',
      },
      icons: {
      iconfont: 'mdi',
    },
    },
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#fec655',
          primarytext: '#23263e',
        },
      }
    }
  },
  purgeCSS: {
    enabled: true,
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      './node_modules/vuetify/dist/*.js',
      './node_modules/vuetify/dist/*.css',
      './node_modules/vuetify/src/**/*.ts',
      './node_modules/@mdi/fonts/*',
    ],
    styleExtensions: ['.css'],
    // whitelist: ['body', 'html', 'nuxt-progress', ''],

    whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
    whitelistPatterns: [
      /^v-((?!application).)*$/,
      /^theme--*/,
      /.*-transition/,
      /^justify-*/,
      /^p*-[0-9]/,
      /^m*-[0-9]/,
      /^text--*/,
      /--text$/,
      /^row-*/,
      /^col-*/,
      /leaflet/, 
      /marker/
    ],
    whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],

    extractors: [
      {
        extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  },

Yet still, this request is being made with the original size, any ideas? What am I doing wrong here? The fonts clearly are pulled from locally and not the CDN.

Answer 1

Aside from working with PurgeCss, Have you tried using @mdi/js instead of mdi icons ?

This's from dev.materialdesignicons.com guide:

Using the webfont while easy to use is highly discouraged due to performance and overall request size

So you may roll that by switching to @mdi/js pachage: https://www.npmjs.com/package/@mdi/js then specify usage in vuetify options in nuxt.config.js

    icons: {
       iconfont: 'mdiSvg',
    }

Now you have saved considerably in the bundle size.