前端项目优化：字符子集化（1）

前端项目优化：字符子集化

前端项目加载速度不仅影响用户体验，还与 SEO 排名密切相关。优化加载速度的核心目标是减少传输数据量、降低资源加载时间，从而提升整体性能。

在前端项目中，字体文件通常包含完整的字符集，但页面实际使用的字符只占很小的一部分。通过字符子集化，可以提取实际使用的字符，生成精简的字体文件，从而减少字体资源的大小，提高加载速度。

实现步骤

字符子集化的核心思想是将页面中实际使用的字符提取出来，并生成只包含这些字符的字体文件。这一过程可以通过以下步骤完成：

1. 收集所需字符

   • 遍历项目中的多语言文件（如 JSON 或 Markdown 格式）和静态文本内容，提取页面中实际使用的字符。
   • 根据项目的语言划分，将不同语言的字符集合分开管理，确保字符提取的准确性。

2. 生成子集字体

   • 使用字体优化工具（如 Fontmin）读取原始字体文件，并生成仅包含指定字符的子集字体。
   • 将子集字体转换为 WOFF2 格式，以进一步减少字体文件的体积。

3. 集成到构建流程

   • 将字体子集化脚本集成到 CI/CD 流程，确保每次构建时能够根据最新的页面内容生成对应的字体子集。

设计思路

• 多语言支持 根据项目支持的语言，将字符集合划分为不同的语言组。例如，针对简体中文（zh-Hans）和繁体中文（zh-Hant）分别生成独立的子集字体文件。

• 自动化提取 使用脚本遍历项目中的所有文本文件，自动提取字符集合，避免手动统计的繁琐和易错。

• 文件格式转换 子集字体生成后，优先将其转换为 WOFF2 格式，因为 WOFF2 在压缩比和浏览器支持度上有较好的平衡。

注意事项

• 动态内容覆盖 如果项目中存在动态内容（如用户评论或表单输入），需要提前定义字符集的扩展范围，以避免遗漏字符。

• 性能优化 确保生成的子集字体文件足够精简，同时覆盖页面中实际使用的所有字符，避免因缺少字符导致的显示问题。

实践效果

在实际项目中，使用字符子集化后，我们实现了以下优化：

• 原始字体大小：约 5MB
• 子集化后字体大小：约 1.2MB
• 页面加载时间减少：平均减少 30%

具体实现

以下是一个字符子集化脚本的实现逻辑：

1. 提取字符集 使用脚本从翻译文件中提取所有可能用到的字符：

   const fs = require('fs');
   const glob = require('glob');
   
   const extractCharacters = (files) => {
     const charSet = new Set();
     files.forEach(file => {
       const content = fs.readFileSync(file, 'utf-8');
       content.split('').forEach(char => charSet.add(char));
     });
     return Array.from(charSet).join('');
   };
   
   const files = glob.sync('./src/locales/**/*.json');
   const characters = extractCharacters(files);
   console.log('提取的字符集：', characters);

2. 生成子集字体 使用 Fontmin 工具生成优化后的字体文件：

   const Fontmin = require('fontmin');
   
   const fontmin = new Fontmin()
     .src('./src/assets/fonts/original.ttf')
     .use(Fontmin.glyph({ text: characters }))
     .use(Fontmin.ttf2woff2())
     .dest('./dist/assets/fonts');
   
   fontmin.run((err, files) => {
     if (err) throw err;
     console.log('字体优化完成！');
   });

3. 集成到 CI/CD 流程

   • 将上述脚本作为构建流程的一部分。
   • 在每次构建前自动运行，确保字体子集始终与页面内容一致。

示例脚本逻辑

1. 配置字体文件 定义字体源目录、目标目录以及语言配置。

2. 提取字符 遍历翻译文件，提取字符后存储为集合，避免重复处理。

3. 优化字体 使用工具处理字体，生成优化后的子集文件。

4. 清理无用文件 删除多余的字体格式文件，仅保留必要的 WOFF2 文件。

通过上述优化，可以显著减少字体文件的体积，并有效提升前端项目的加载速度。