【技术实现步骤摘要】
基于Vite的web字体文件压缩方法、装置及其应用
[0001]本申请涉及前端开发
,特别是涉及基于Vite的web字体文件压缩方法、装置及其应用。
技术介绍
[0002]Vite是下一代前端开发与构建工具,是一个面向JavaScript和TypeScript的开发者的构建工具,旨在通过提供快速构建、编译和部署的体验,来帮助前端开发者更快速地开发应用。Vite意在提供开箱即用的配置,同时它的插件API和JavaScript API带来了高度的可扩展性,并有完整的类型支持。其主要有由两部分组成:
[0003]1.一个开发服务器,它基于原生ES模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。
[0004]2.一套构建指令,它使用Rollup打包代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
[0005]Vite利用了浏览器对于原生ESM(ES Module)的支持,以原生ESM方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。Vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。因此,极大提高了开发环境下的启动速度,也使其成为当下最流行的前端开发构建工具之一。并且Vite提供了丰富的插件API(接口能力),可供开发者在实际项目开发过程中结合Vite开发出多种多样的插件。
[0006]Fontmin是一种字体子集化方案实现开源库。它提供了一种在nodejs环境下,通过调用Fontm ...
【技术保护点】
【技术特征摘要】
1.基于Vite的web字体文件压缩方法,其特征在于,包括以下步骤:S00、在开发项目内将Vite的vite
‑
plugin
‑
subfont插件引入并添加到Vite的配置文件中,设置所述vite
‑
plugin
‑
subfont插件的配置参数;S10、将所述vite
‑
plugin
‑
subfont插件的入口参数设置为对象数组形式,数组的每一项对应一种字体配置;S20、通过Vite的钩子函数load()将字体命名样式引入到项目中,以生成虚拟样式;S30、根据配置参数,通过Vite的钩子函数transform()进行扫描匹配操作,以获得目标文件的内容代码;S40、将获得的所有内容代码分类收集后得到文本集合;S50、将所述文本集合和所述配置参数传入Fontmin,通过Fontmin构建压缩生成最终的子集字体文件。2.如权利要求1所述的基于Vite的web字体文件压缩方法,其特征在于,S10步骤中,每一项数组内每一项配置的可选参数包括name参数、scan参数、src参数及dev参数,所述name参数为String类型,表示字体样式名,所述scan参数为Glob正则类型,表示需要扫描的目标文本的文件范围,所述src参数为String类型,表示原字体文件路径,且为必填项,所述dev参数为Object类型,表示指定是否在开发模式下生效。3.如权利要求2所述的基于Vite的web字体文件压缩方法,其特征在于,S10步骤中,所述dev参数包括open属性和dest属性,所述open属性为Boolean类型,用于表示是否开启字体文件压缩,所述dest属性为String类型,用于在开发模式下压缩字体文件生成文件夹路径。4.如权利要求3所述的基于Vite的web字体文件压缩方法,其特征在于,S20步骤的具体步骤为:定义样式虚拟模块的名称;通过钩子函数load()传入的对象数组形式的配置参数,进行遍历得到每项字体的配置;判断每一项配置内的dev参数的dest属性是否开启;若未开启,则使用src参数的属性值作为项目的字体命名样式内部的字体文件路径;若开启,则使用开发模式下压缩字体文件生成的文件夹路径;将配置中的name参数的属性设为字体样式值,以通过拼接字符...
【专利技术属性】
技术研发人员:李圣权,周涛,牛宇鹏,洪凯,赵昀,
申请(专利权)人:城云科技中国有限公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。