Vue3 超大字体font-slice按需分片加载，极速提升首屏速度， 中文分片加载方案，性能优化

介绍

核心解决 中文字体文件过大、网页加载慢、首屏渲染阻塞 的痛点，通过 自动字体分片 + CSS unicode-range 按需加载，实现字体资源的极致优化。首屏速度暴增：从 MB 级 → KB 级，首屏字体加载体积减少 80%~95%

安装依赖

分片需要使用node来执行，不要在项目下安装

npm install --save-dev font-slice

配置文件

run.js

const path = require('path');

const createFontSlice = require('font-slice');

createFontSlice({
  // fontPath
  fontPath: path.resolve(__dirname, 'Inter-UI-Regular-2.ttf'),
  // outputDir
  outputDir: path.resolve(__dirname, './output'),
})

Inter-UI-Regular-2.ttf为我的字体文件

运行

node run.js

分片成功

分片成功会自动生成引入到css

引入CSS

main.js

import '@/assets/font/slice/font.css'

使用

body{
  overflow-y:hidden ;
  font-family: Inter-UI-Regular-2;
}

性能差异

从 MB 级 → KB 级