Nuxtjs + Vuetify + Purgecss

Question

看到 Vuetify 在使用带有 nuxt@vuetify-module 的图标时添加了大约 300-340kb 的图标：'mdi'，我发现答案表明 purgeCSS 是去除不必要和未使用图标的好方法。

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

我似乎无法让 purgecss 删除图标（这对我来说是最重要的）。

我安装了“@nuxtjs/vuetify”：“^1.11.3”， 我安装了“nuxt-purgecss”：“^1.0.0”， 我安装了 "@mdi/font": "^5.9.55",

看着这个答案，我试图创建我的设置 why do i see vuetify css in view source? 他们也在这里讨论： 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 中的 vuetify 选项中指定用法

    icons: {
       iconfont: 'mdiSvg',
    }

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