webpack 中的 hash 与优化：提升网站性能和用户体验

2023-11-30 00:40:17

webpack 中的 hash

webpack 是一个用于构建 JavaScript 和其他资产的现代打包工具。它可以通过配置 output.filename 选项来为每个输出资源生成一个带 hash 的路径，例如：

output: {
  filename: '[name].[contenthash].js'
}

在这个配置中，[contenthash] 部分将被替换为资源内容的 hash 值。这种哈希对于资源缓存非常有用，因为它允许浏览器仅在资源内容发生更改时才重新下载资源。

缓存类型

Long-term caching（长期缓存）

long-term caching 通常由 CDN（内容分发网络）实现，它将静态资源存储在靠近用户的边缘服务器上。当用户请求资源时，CDN 会检查资源的 hash 是否与服务器上存储的版本匹配。如果匹配，CDN 将直接从边缘服务器提供资源，而无需向原始服务器发出请求。这可以显著减少延迟并提高加载速度。

Short-term caching（短期缓存）

short-term caching 是由浏览器执行的。当浏览器第一次加载资源时，它会将资源存储在本地缓存中。下次用户请求同一资源时，浏览器将首先检查本地缓存。如果资源在缓存中，浏览器将直接从缓存中提供资源，而无需向服务器发出请求。这可以进一步减少延迟并提高加载速度。

优化 hash 策略

优化 webpack 中的 hash 策略对于提高网站性能至关重要。以下是一些建议：

使用contenthash： contenthash 选项将生成一个基于资源内容的哈希。这对于确保在资源内容更改时资源路径也更改非常有用。
考虑使用chunkhash： chunkhash 选项将生成一个基于 chunk 内容的哈希。这对于代码分割很有用，它可以确保在 chunk 内容更改时 chunk 路径也更改。
配置 publicPath： publicPath 选项指定资源在浏览器中引用的路径。将其配置为 CDN URL 可以启用 long-term caching。
使用 name 选项： name 选项允许您为输出资源指定一个自定义名称。这对于在输出路径中包含有意义的名称很有用。