面试题：Webpack下图片与字体资源缓存策略在版本更新时的处理

Question

假设项目使用Webpack构建，在进行版本更新时，图片和字体资源的缓存可能导致用户获取不到最新内容。阐述如何优化Webpack配置，使得在版本更新时，能正确处理图片与字体资源的缓存，既保证缓存利用率，又确保用户能获取最新资源。同时说明所涉及的缓存相关原理。

Answer 1

优化Webpack配置

1. 使用Hash命名：在Webpack的output配置中，通过设置filename和assetModuleFilename，利用[hash]占位符为输出的图片和字体资源文件名添加哈希值。例如：

module.exports = {
  output: {
    // 其他配置...
    assetModuleFilename: 'assets/[name].[hash][ext][query]'
  }
};

这样，当资源内容发生变化时，哈希值也会改变，从而使文件名改变，打破浏览器缓存。 2. 设置缓存控制头：在Webpack开发服务器或生产部署的服务器配置中，设置合适的缓存控制头。例如，在Node.js应用中使用Express框架时：

const express = require('express');
const app = express();
// 设置图片和字体资源缓存时长，假设为1年（31536000秒）
app.get(/\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg)$/, (req, res) => {
  res.set('Cache - Control','public, max - age=31536000');
  // 处理资源响应
});

缓存相关原理

1. 浏览器缓存机制：浏览器根据文件名和缓存控制头来决定是否使用本地缓存。当文件名不变且缓存控制头允许时，浏览器会直接从本地缓存加载资源，提高加载速度。而文件名改变后，浏览器会认为这是一个新资源，从而重新请求服务器获取最新内容。
2. 哈希值的作用：哈希值是根据资源内容计算得出的唯一标识。资源内容不变，哈希值不变；内容改变，哈希值改变。通过将哈希值作为文件名的一部分，能精准判断资源是否发生变化，从而有效利用缓存并及时更新资源。
3. 缓存控制头：Cache - Control头信息用于控制浏览器对资源的缓存策略。public表示资源可以被任何缓存（包括浏览器和中间代理服务器）缓存，max - age指定了资源在缓存中的有效时长（以秒为单位）。合适的缓存时长设置能在保证缓存利用率的同时，在合理时间内更新资源。