面试题：Webpack中如何配置图片与字体资源的基础缓存策略

Question

在Webpack项目里，描述一下如何对图片和字体资源进行基础的缓存配置，以确保在浏览器端能有效利用缓存，提升加载速度。并说明一般常用的缓存配置参数及其作用。

Answer 1

图片和字体资源缓存配置

1. 使用 file-loader 或 url-loader
   • file-loader：它会将文件输出到指定目录，并返回该文件的 URL。在 Webpack 配置中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'assets/', // 输出到 assets 目录
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

• url-loader：它类似 file-loader，但当文件较小时，可以将文件转换为 base64 编码的字符串，直接嵌入到代码中，减少 HTTP 请求。配置如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|woff|woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 文件小于 8kb 时转为 base64
                            outputPath: 'assets/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

2. 设置 HTTP 缓存头
   • 在服务器端配置，例如在 Node.js 中使用 Express：

const express = require('express');
const app = express();

app.use('/assets', express.static('dist/assets', {
    maxAge: 31536000 // 缓存 1 年，以秒为单位
}));

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

常用缓存配置参数及其作用

1. limit（url-loader 特有）：决定文件在多大（以字节为单位）时转换为 base64 编码。小于该值的文件会被转换，减少 HTTP 请求；大于该值的文件会按照 file-loader 的方式处理。
2. outputPath：指定文件输出到 Webpack 打包目录中的具体路径。这有助于组织项目资源，比如将图片和字体统一放在 assets 目录下。
3. name：定义输出文件的名称。[name] 代表原文件名，[ext] 代表原文件扩展名。通过合理设置名称，可以方便管理和识别文件。
4. maxAge（服务器端缓存配置）：设置缓存的最大有效时间，以秒为单位。例如设置 maxAge: 31536000 表示缓存有效期为 1 年，在有效期内浏览器再次请求相同资源时，直接从缓存中获取，提升加载速度。