面试题：Webpack自定义字体加载策略与性能监控

Webpack 配置

安装必要的 loader：
- @fontsource/webpack 用于加载字体文件，并且支持按需加载。
- 首先安装 @fontsource/webpack：
```
npm install @fontsource/webpack -D
```

Webpack 配置示例：

const path = require('path');
const FontsourcePlugin = require('@fontsource/webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: '@fontsource/webpack',
            options: {
              // 按需加载配置，例如只加载特定语言的字体子集
              subsets: ['latin', 'cyrillic'],
              // 动态加载相关配置
              format: 'lazy'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new FontsourcePlugin({
      // 可以在这里配置字体的其他选项，如字体家族等
      families: ['Roboto']
    })
  ]
};

在上述配置中，@fontsource/webpack loader 处理字体文件。subsets 选项实现按需加载，只加载指定语言子集的字体。format: 'lazy' 配置实现动态加载，字体在需要时才加载。

性能监控及动态调整加载策略

性能监控：

使用 PerformanceObserver API：

在前端代码中，可以使用 PerformanceObserver 来监控字体加载性能。例如：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (entry.name.endsWith('.woff2') || entry.name.endsWith('.woff') || entry.name.endsWith('.ttf')) {
      const loadTime = entry.duration;
      console.log(`Font ${entry.name} loaded in ${loadTime} ms`);
      // 这里可以将监控数据发送到后端进行分析
    }
  });
});
observer.observe({ type: 'resource', buffered: true });

集成监控工具：
- 可以使用类似 Lighthouse 等工具，在 CI/CD 流程中对项目进行性能测试，分析字体加载时间等指标。Lighthouse 会给出详细的性能报告，包括字体加载的优化建议。

动态调整加载策略：
- 基于监控数据调整子集加载：
  - 如果监控到某些字体子集加载时间过长，可以根据后端分析的数据，调整 subsets 选项。例如，如果发现 cyrillic 子集加载慢且项目中很少用到，可以去掉 cyrillic 子集。
- 调整动态加载策略：
  - 根据监控到的网络状况和用户行为，如果发现动态加载字体导致用户体验不佳（例如多次加载字体影响页面交互），可以调整为预加载策略。在 @fontsource/webpack 中，可以通过修改 format 选项来实现。例如，从 lazy 改为 preload。
- 动态加载字体样式：
  - 可以根据监控结果动态加载字体样式。例如，根据用户所在地区或设备性能，通过 JavaScript 动态加载不同的字体样式表。可以使用 fetch API 来获取字体样式文件，并将其插入到页面中。
```
const loadFontStyle = async (fontUrl) => {
  const response = await fetch(fontUrl);
  const styleText = await response.text();
  const style = document.createElement('style');
  style.textContent = styleText;
  document.head.appendChild(style);
};
// 根据监控数据决定加载哪个字体样式文件
loadFontStyle('path/to/font - style.css');
```

星途面试题库

面试题：Webpack自定义字体加载策略与性能监控

知识考点

面试题答案

Webpack 配置

相关插件的使用

性能监控及动态调整加载策略