前端静态资源文件命名为什么是hash值？原来如此！

2024-01-24 00:31:19

前端静态资源文件为何使用 Hash 值？

在现代前端开发中，我们经常遇到这样的场景：静态资源文件（如 JS、CSS）在打包后，文件名都会变成一串看似随机的字符，即 Hash 值。这背后的原因是什么呢？

资源缓存：保持更新，告别陈旧

浏览器在加载网站或应用时，会将静态资源文件缓存到本地。但当这些文件发生变化时，浏览器不会自动刷新它们。如果文件名保持不变，浏览器将继续使用旧版本的文件，导致网站或应用出现问题。

为了解决这个问题，我们需要给静态资源文件赋予一个新的标识符，让浏览器知道它们已经更新。而 Hash 值就能完美胜任此项任务，因为它是根据文件内容生成的，只要内容改变，Hash 值也会随之变化。这样，浏览器就能通过 Hash 值判断文件是否已更新，并决定是否重新加载。

文件优化：高效优化，智能加载

在前端开发中，我们常常对静态资源文件进行优化，例如压缩、合并等。这些优化操作会改变文件的内容，从而导致 Hash 值变化。

通过使用 Hash 值作为文件名，我们可以确保在优化文件后，浏览器能够重新加载它们。浏览器会检查文件 Hash 值，如果发现与之前加载的文件不同，则重新加载优化后的文件，保证网站或应用始终加载最新版本的资源。

Hash 值是如何生成的？

Hash 值是通过哈希算法生成的。哈希算法是一种数学算法，它将任意长度的输入数据转换为固定长度的输出数据。常用的哈希算法有 MD5、SHA1、SHA256 等。

在前端开发中，Webpack 等构建工具通常使用 MD5 或 SHA1 等算法来生成 Hash 值。它们会将静态资源文件的原始内容作为输入，并输出一个固定的字符串，即 Hash 值。

Hash 值的妙处：缓存、性能、安全

使用 Hash 值命名静态资源文件的好处多多：

提高缓存命中率： 浏览器通过 Hash 值判断文件是否已更新，避免不必要地重新加载，提高缓存命中率，加速页面加载。
提升性能： 浏览器缓存优化后的文件，避免重复加载原始文件，降低带宽消耗，提升网站或应用性能。
增强安全性： Hash 值可以防止攻击者篡改静态资源文件。因为一旦文件内容发生变化，Hash 值也会随之改变。攻击者无法伪造合法的 Hash 值，从而无法篡改文件。

代码示例：使用 Webpack 生成 Hash 值

Webpack 是一个流行的前端构建工具，我们可以使用它来给静态资源文件生成 Hash 值：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
  ],
};