Vue项目字体文件过大,导致网页加载缓慢,使用字蛛解决。
2021/11/12 23:41:19
本文主要是介绍Vue项目字体文件过大,导致网页加载缓慢,使用字蛛解决。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题
网页如果使用自定义的字体,那就必须将字体文件放在服务器对应的文件夹下。但是一般字体文件都非常大,小则几MB,大则几十MB。如果全部从服务器加载到页面上,不仅占用带宽,而且网页加载的十分慢。正常情况下,我们并不会用到所有的中文,如果是文字内容变化比较小的情况下,使用字蛛压缩字体包大小是个不错的选择。
字蛛的原理就是将html页面中用到的自己统计起来,产生一个新的字体包,这个字体包仅仅包含你使用到的文字转换后的字体。
使用
全局安装字蛛
没有安装node的参考:node.js安装教程
npm intsall font-spider -g
新建一个index.html页面,页面内容中应该包含你要使用的文字内容,只要包含文字就行,没有标签的要求,字蛛会自己检索。
引入自定义字体。
当前目录结构:
在当前文件目录下打开终端,输入
font-spider index.html
回车运行
查看转换后的目录:
在文件夹下查看:
处理后字体包: 原来的字体包: 可以看到字体包由12MB左右减少到了244kb,现在就可以将过滤后的字体包引用到项目里了。 注意:这里过滤的字体包固定了字体,所以只适用于固定的内容改字体。不过可以将一些常用字一起过滤,就能够满足大多数场景了。
这篇关于Vue项目字体文件过大,导致网页加载缓慢,使用字蛛解决。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist