js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

时间:2024-04-08 14:23:11

闲言少叙 下载 安装

Font-spider npm
跟着官方教程操作就OK了

使用

之前引入字体,发现都很大,非常影响加载速度,
font-spider可以抽离出你使用到的字体,
但是对于单页面的动态数据有点不可行,
因为你也不知道返回的数据到底有哪些字体,
所以我抽离的少一些固定的标题和十个数字字体。

一、测试文件夹如下

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

二、html里面引入字体,在页面输出用到的字体,方便font-spider抽取

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

三、运行 gitbash

测试一下font-spider是否全局安装 切记要在测试文件夹下运行js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

四、运行 一定要开启 --debug模式,方便看报错

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

五、修成正果,1M压缩到了4kb,真香!

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

Thanks for Font-spider Tearm!