Vuetify项目优化：仅引入所需Material Design Icons方案咨询

嘿，刚好碰到过类似的场景，给你拆解下这两种方案的具体实现方式，适配你用Parcel.js+Vuetify的环境：

MDI支持自定义生成只包含指定图标的字体包，这样CDN加载的内容就只有你需要的2个图标，步骤如下：

• 先找到MDI的自定义构建页面，勾选你用到的那2个图标，下载生成的压缩包——里面会包含精简后的CSS文件和对应字体文件（体积仅几KB）。
• 把下载的文件上传到你的CDN或静态文件托管服务，然后在HTML里替换原来的完整MDI CSS链接，改成这个自定义CSS的CDN地址就行。
• 注意：要确保Vuetify的图标配置还是指向MDI字体，这样组件里的v-icon或者Chips的图标类名（比如mdi-xxx）才能正常生效。

Parcel本身支持Tree-Shaking，但直接引入完整的MDI CSS没法自动摇树，得换个方式引入：

推荐用SVG图标方案（比字体摇树更高效） #

MDI提供了@mdi/js包，里面是每个图标的SVG路径，Parcel能自动摇掉没用到的路径：

1. 先安装依赖：npm install @mdi/js@3.x --save
2. 在Vuetify配置里改成SVG模式：

   import Vue from 'vue'
   import Vuetify from 'vuetify/lib'
   import { mdiIcon1, mdiIcon2 } from '@mdi/js' // 替换成你需要的图标
   
   Vue.use(Vuetify)
   
   export default new Vuetify({
     icons: {
       iconfont: 'mdiSvg',
       values: {
         icon1: mdiIcon1,
         icon2: mdiIcon2
       }
     }
   })
   

3. 然后在Chips组件里直接用：

   <v-chip>
     <v-icon>$icon1</v-icon>
     Chip Text
   </v-chip>
   

   这样Parcel打包时只会把这两个图标的SVG路径包含进去，完全不用加载字体文件，体积极小。

要是坚持用字体图标摇树 #

那得自定义MDI字体包，然后整合到Parcel的构建流程：

1. 用方案1里的自定义构建工具生成精简的字体和CSS文件，放到项目的静态资源目录。
2. 在你的主CSS文件里引入这个精简的CSS，Parcel会自动把字体文件打包到构建产物里，并且处理哈希缓存。
3. 这种方式下，最终的CSS和字体文件都只包含你需要的图标，Parcel会帮你整合到构建包中，不用额外的CDN请求。

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