如何移除Vuetify应用中的图标字体文件并缩减体积？

我的vite-config.js配置如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import usePHP from 'vite-plugin-php'

export default defineConfig({
  plugins: [
    usePHP({
      binary: 'C:/tools/php83/php.exe',
    }),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['v-list-item-content', 'v-list-item-group'].includes(tag),
        }
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      external: ['/config/settings.json'],
      output: {
        manualChunks(id) {
          return 'App';
        }
      }
    }
  }
})

执行npm run build后得到如下构建结果：

vite v5.4.14 building for production...
✓ 875 modules transformed.
dist/index.php                                              0.99 kB
dist/assets/materialdesignicons-webfont-Dp5v-WZN.woff2    403.22 kB
dist/assets/materialdesignicons-webfont-PXm3-2wK.woff     587.98 kB
dist/assets/materialdesignicons-webfont-B7mPwVP_.ttf    1,307.66 kB
dist/assets/materialdesignicons-webfont-CSr8KVlo.eot    1,307.88 kB
dist/assets/index-B9hCvS5B.css                            774.23 kB │ gzip: 110.89 kB
dist/assets/index.php-Cxh_CgE8.js                         576.45 kB │ gzip: 184.18 kB

materialdesignicons字体文件体积对小型应用来说过大，请问如何减小这些字体文件的体积？这是Vuetify的问题吗？

补充：我的main.js配置如下：

//Vuetify
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
  locale: {
    messages: { de, en }
  }
})

app
  .use(createPinia())
  .use(vuetify)
  .use(router)

一、这不是Vuetify的问题 #

你当前直接引入了完整的@mdi/font包，里面包含所有Material Design图标，体积自然偏大。Vuetify只是默认推荐这套图标库，但并未强制要求引入全部图标。

二、减小字体体积的具体方法 #

1. 按需引入图标（最彻底有效）

放弃引入完整的字体包，改用SVG图标按需导入：

• 安装@mdi/js包：npm install @mdi/js
• 在需要图标的组件中，单独导入用到的图标：

  import { mdiHome, mdiUser } from '@mdi/js'
  

• 在Vuetify组件中直接使用：

  <v-icon>{{ mdiHome }}</v-icon>
  

这种方式只会打包你实际用到的图标SVG代码，完全规避大体积字体文件的问题，还支持自定义图标颜色、大小等样式。

2. 裁剪自定义字体包

如果坚持使用字体形式的图标，可裁剪出仅包含项目用到的图标：

• 使用Material Design Icons官方裁剪工具，选择所需图标生成自定义字体包
• 替换项目中原有的@mdi/font资源，只引入裁剪后的CSS和字体文件

3. 移除多余字体格式

主流浏览器已支持woff2格式，可通过配置移除其他冗余字体：

• 借助PostCSS插件或自定义规则，过滤掉.eot、.ttf、.woff格式的引用
• 在vite.config.js的build.rollupOptions中添加资源过滤规则，剔除无用字体文件

4. 启用传输压缩

启用gzip或brotli压缩，虽不会减小源文件体积，但能降低传输大小：

• 安装vite-plugin-compression：npm install vite-plugin-compression --save-dev
• 修改vite.config.js添加插件：

  import viteCompression from 'vite-plugin-compression'
  
  export default defineConfig({
    plugins: [
      // ...其他已有插件
      viteCompression({
        algorithm: 'brotliCompress',
        threshold: 10240 // 仅压缩大于10KB的文件
      })
    ]
  })
  

内容的提问来源于stack exchange，提问作者theking2