Vue 3 项目怎么在初始化时配置字体子集化与离线加载-Vue.js-PHP中文网

vue 3 项目初始化即集成字体子集化与离线加载：通过 fontmin 自动提取实际用字生成精简字体，配合 vite 静态拷贝、内联 css 声明及 preload，实现零手动、可复用、构建时自动化。

vue 3 项目怎么在初始化时配置字体子集化与离线加载

Vue 3 项目初始化阶段就集成字体子集化与离线加载，关键在于把字体当作可构建、可按需处理的资源，而不是手动丢进 assets/fonts 然后写一堆 @font-face。Vite 生态下没有现成的“开箱即用”插件像 Webpack 那样直接支持字体自动化，但通过合理组合配置和轻量脚本，完全可以做到零手动、可复用、构建时自动完成。

字体子集化：只保留实际用到的字符

中文字体动辄几 MB，但一个后台系统可能只用到「首页、用户、设置、导出、成功、失败」等几十个字。子集化就是剔除冗余字符，体积直降 70%+。推荐在项目初始化时就固化流程：

安装 fontmin 作为本地 CLI 工具：npm install --save-dev fontmin
在 scripts/font-subset.js 中定义子集逻辑（支持中文、英文、数字、常用符号）：
const text = '首页用户设置导出成功失败 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !？。、；：“”（）【】《》';
运行命令生成子集字体：node scripts/font-subset.js，输出 src/assets/font/LXGWWenKai-Medium-subset.woff2 等压缩格式
配合 vite-plugin-static-copy 或自定义插件，在 build 阶段自动拷贝子集字体到 public/fonts/ 目录，确保静态可访问

离线加载：不依赖 CDN，字体文件随包部署

避免使用 Google Fonts、阿里图标字体等在线链接——它们会拖慢首屏、触发 FOIT、且私有环境不可用。离线加载的核心是：字体文件进构建产物，CSS 声明走内联或预加载。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

将子集后的 .woff2 文件放在 public/fonts/（Vite 默认静态托管目录），路径如 /fonts/brand-regular.woff2
在 src/assets/styles/fonts.css 中统一声明 @font-face，并启用 font-display: swap 防止文字隐形：
@font-face { font-family: 'BrandSans'; src: url('/fonts/brand-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
在 main.ts 或全局样式入口中 import '@/assets/styles/fonts.css'，确保构建时 CSS 被收集并注入
如需更高控制力，可用 vite-plugin-html 在 index.html 的中插入 <link rel="preload"> 提前加载关键字体

Vite 配置联动：让字体参与构建优化

字体不是“静态资源”而是“可优化资产”，需要纳入 Vite 构建链路：

在 vite.config.ts 中启用 build.rollupOptions.output.manualChunks，把字体 CSS 单独拆包（例如 fonts.css），便于 CDN 缓存分离
添加 build.assetsInlineLimit: 0 确保字体文件不被转为 base64（woff2 不适合 inline，体积大且无法缓存）
配合 vite-plugin-pwa 可选：将字体文件加入 PWA 的 precache 列表，实现离线可用
开发阶段可加 watch 脚本：监听 src/assets/font/*.ttf 变更，自动触发子集化 + 重载服务（用 chokidar 实现）