font-spider压缩字体文件
通过一段时间的运行,发现即使将网站的字体文件(dotted2MB,soft4MB)放到CDN加载依然很慢,而且流量跑的飞快!不得已开始寻找压缩字体的方式,最终找到了font-spider这个工具,可以依据html文件,将用到字体的字给单独提取出来打包成小的字体包,貌似只支持ttf格式的字体文件。
全局安装工具
由于该工具具有普适性,未来也许啥时候还会经常用,所以这里采用全局安装。
npm i font-spider -g
编写html
该html需要包含所有带外加字体的文字,并且设置字体。
打开该html文件效果如下,已经运用了字体。
压缩
使用font-spider指令来对html文件进行体取和压缩。结果如下图。一共发现了两个附加字体,并且成功的压缩了!每个几乎压缩了200倍!即使是我自己的服务器也可以轻松加载的程度。
便捷
该工具还有个特别便捷的地方就是,它会找到我们的字体文件,并且自动替换该字体文件。当然不用担心原来的字体文件不见了,它会将完整包的字体文件放在.font-spider文件夹下,所以完全不需要考虑修改代码和原字体的备份问题。
总结
通过font-spider字蛛工具,可以便捷的对字体文件进行压缩而不用考虑其它文件的迁移备份问题,非常方便。不过需要注意的是,只适用于那些固定字需要字体的情况,倘若是一个需要动态加载的文本内容,那么基本是无效的啦!所以对于哪些地方用这种字体一定要抉择好,对于动态的文本,利用大家本地都有的字体比如宋体、方正等更加合适。
附:对于vue项目,如果没有特别的配置,在F12的source下,会发现一个webpack://的资源,会展示一部分源码,相对来说并不是很安全,需要在vue.config.js文件内加上 productionSourceMap: false 这样一行配置,这样打包的时候就不会生成map文件了,在开发环境仍然会存在哦!
相关文章
- Vue 组件间通信的几种方式
- JAVA IO——获取文件信息
- konva系列教程5:事件
- JAVA IO——目录操作
- React 如何实例化组件?
- React 的生命周期函数有哪些?
- JAVA IO——IO原理和分类
- 从源码层次了解 React 生命周期:挂载
- 从源码层次了解 React 生命周期:更新
- 如何用发个 npm 包?
- TypeScript 中的 any、unknown、never 和 void
- 前端工程化指的是什么?
- React 合成事件的源码实现
- React 的调度系统 Scheduler
- 牛客刷题——剑指offer(第五期)
- JAVA IO——常用的类
- JAVA IO——FileOutputStream
- JAVA 多线程——实现创建线程的五种写法
- JAVA IO——文件拷贝
- 牛客刷题——剑指offer(第6期)