为何Vuetify中@mdi/js图标包需作为devDependency安装？

官方给出的Vuetify集成Material Design Icons的安装命令如下：

yarn add @mdi/js -D
// 或者
npm install @mdi/js -D

不少人看到命令里的-D参数会有疑问：这个参数是把依赖标记为devDependency（开发依赖），但图标属于应用运行时要用到的必备资源，为什么不算生产依赖？

这个分类逻辑和@mdi/js的使用方式、现代前端构建工具的打包规则直接相关：

• 用@mdi/js时，我们都是在代码里单独引入需要用到的单个图标，比如import { mdiHome } from '@mdi/js'，从来不会在运行时动态加载整个包的内容。
• Vite、Webpack这类构建工具在打生产包的时候，会静态扫描所有代码里的导入语句，把真正用到的图标SVG路径直接提取出来，合并到最终生成的前端静态资源文件里。等应用部署到线上、在用户浏览器里运行的时候，根本不需要再读取node_modules里的@mdi/js原包。
• 也就是说@mdi/js只在本地开发、执行构建命令的阶段需要被访问，生产运行阶段完全用不到这个包本身，自然就可以归类为开发依赖。

可以和另一种MDI用法做个对比：如果是用CDN加载全量MDI图标字体，或者在项目入口全量引入@mdi/font的CSS文件，浏览器运行时需要加载完整的字体资源，这时候对应的包就应该安装为生产依赖，和@mdi/js的按需引入场景有本质区别。

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