面试题：Webpack构建中如何深度优化图片与字体资源以应对高并发场景

网络请求优化

图片压缩：
- 原理：通过减少图片文件大小，降低网络传输量，从而加快图片加载速度。
- 关键配置：使用image-webpack-loader。在Webpack配置中，添加如下loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

字体按需加载：
- 原理：只加载页面实际需要的字体子集，减少字体文件大小，提升加载速度。
- 关键配置：使用fonttools相关工具生成字体子集。例如，使用fonttools生成包含特定字符集的字体文件，然后在Webpack配置中正常引入该字体文件。

资源缓存策略

图片缓存：
- 原理：合理设置图片的缓存头，让浏览器在后续访问中直接从本地缓存加载图片，减少网络请求。
- 关键配置：在Web服务器（如Nginx）配置中设置缓存头。例如：

location ~* \.(jpg|jpeg|png|gif|webp)$ {
    expires 365d;
    access_log off;
}

字体缓存：
- 原理：类似图片，通过设置缓存头让浏览器缓存字体文件，下次访问相同字体时直接从本地获取。
- 关键配置：在Web服务器配置中设置，如在Nginx中：

location ~* \.(woff|woff2|ttf|otf)$ {
    expires 365d;
    access_log off;
}

Webpack插件与loader深度配置

图片懒加载：
- 原理：只在图片进入浏览器可视区域时才进行加载，避免一次性加载大量图片，减少初始加载时间，优化高并发场景下的资源请求。
- 关键配置：使用vue - lazyload（针对Vue项目）或react - lazyload（针对React项目）等库。以Vue - lazyload为例，先安装vue - lazyload，然后在Vue项目入口文件（如main.js）中配置：

import Vue from 'vue';
import VueLazyload from 'vue - lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
});

在Webpack配置中，确保图片相关loader正常配置，以便正确处理懒加载图片路径。 2. 字体文件处理： - 原理：Webpack的url - loader和file - loader可以灵活处理字体文件，根据文件大小决定是将字体转换为Data URL嵌入到CSS中还是单独生成文件。 - 关键配置：在Webpack配置中添加如下规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8].[ext]'
        }
      }
    ]
  }
};

如果希望根据字体文件大小决定处理方式，可以使用url - loader，如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url - loader',
            options: {
              limit: 8192, // 8kb，小于该大小转换为Data URL
              name: 'fonts/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

星途面试题库

面试题：Webpack构建中如何深度优化图片与字体资源以应对高并发场景

知识考点

面试题答案

网络请求优化

资源缓存策略

Webpack插件与loader深度配置