iconfont资源引入方式

Question

官方介绍的方法是
第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="unionFont unionFont-xxx"></span>

但是我想咨询的是，我们实际项目是通过在main.js里引入的，为什么选择这种方式呢，我的想法是直接放在index.html里

import '@/assets/css/iconfont/iconfont.css'
import '@/assets/css/iconfont/iconfont.js'

Answer 1

1.使用 index.html 中用 link 引入时相当于 引用的是线上的资源，如果项目需要加载的资源特别大，你就要考虑到首屏的加载速度；
2.在 main.js 中的引入方式 实际上是已经把资源下载到本地了，当做静态资源来用，首屏加载时，不会再去请求这些资源；
具体两种使用方式 其实都可以的，要看你对加载速度有没有要求，如果 你首屏 没有请求太多资源 就可以用 index.html 中 link 引入