Nuxtjs + Vuetify + Purgecss

Posted 2023-03-16

【中文标题】Nuxtjs + Vuetify + Purgecss

【英文标题】：

【发布时间】：2021-08-20 03:09:20

【问题描述】：

看到 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 提取的。

【参考方案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',
    

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

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击 提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 引起更多的关注。