Nuxtjs + Vuetify + Purgecss

Question

看到Vuetify在使用图标时添加了大约300-340kb的图标：'mdi‘和nuxt@vuetify module，我已经找到了答案，表明purgeCSS是一个很好的解决方案，可以去除不必要和不使用的图标。

我最初从'mdi/font‘手动导入图标，但很快意识到这是一个非常无效的解决方案，因为它迫使我不断地想出手动将图标添加到组件的解决方案。

我似乎不能让purgecss删除图标(这对我来说是最重要的)。

安装了"@nuxtjs/vuetify"："^1.11.3"，安装了"nuxt-purgecss"："^1.0.0"，安装了"@mdi/font"："^5.9.55"，

看着这个答案，我试着创建我的设置，他们也在这里讨论它：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']
      }
    ]
  },

然而，这个请求仍然是以原始大小提出的，有什么想法吗？我在这里做错了什么？字体显然是从本地提取的，而不是CDN。

​

Answer 1

除了使用PurgeCss之外，您是否尝试过使用@ mdi /js而不是mdi图标？

这篇文章来自dev.materialdesignicons.com指南：

由于性能和总体请求大小的原因，非常不鼓励使用易于使用的webfont的

因此您可以切换到@mdi/js pachage：https://www.npmjs.com/package/@mdi/js，然后在nuxt.config.js中指定用法

    icons: {
       iconfont: 'mdiSvg',
    }

现在，您已经节省了大量的捆绑包大小。