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

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

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

实现步骤

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

收集所需字符
- 遍历项目中的多语言文件（如 JSON 或 Markdown 格式）和静态文本内容，提取页面中实际使用的字符。
- 根据项目的语言划分，将不同语言的字符集合分开管理，确保字符提取的准确性。
生成子集字体
- 使用字体优化工具（如 Fontmin）读取原始字体文件，并生成仅包含指定字符的子集字体。
- 将子集字体转换为 WOFF2 格式，以进一步减少字体文件的体积。
集成到构建流程
- 将字体子集化脚本集成到 CI/CD 流程，确保每次构建时能够根据最新的页面内容生成对应的字体子集。

设计思路

多语言支持
根据项目支持的语言，将字符集合划分为不同的语言组。例如，针对简体中文（zh-Hans）和繁体中文（zh-Hant）分别生成独立的子集字体文件。
自动化提取
使用脚本遍历项目中的所有文本文件，自动提取字符集合，避免手动统计的繁琐和易错。
文件格式转换
子集字体生成后，优先将其转换为 WOFF2 格式，因为 WOFF2 在压缩比和浏览器支持度上有较好的平衡。

注意事项

动态内容覆盖
如果项目中存在动态内容（如用户评论或表单输入），需要提前定义字符集的扩展范围，以避免遗漏字符。
性能优化
确保生成的子集字体文件足够精简，同时覆盖页面中实际使用的所有字符，避免因缺少字符导致的显示问题。

实践效果

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

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

具体实现

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

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

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);

生成子集字体
使用 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('字体优化完成！');
});