当前位置：首页>后端>正文

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦

后端2024-04-30 21:13:10

hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。

文件名不带哈希值

webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 部分配置省略
  entry: {
    index: './src/index.js',
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name].css',
    }),
  ],
};

在 index.js 中使用 axios 发送请求，main.js 中引入 index.css资源

src
 ├─ index.css
 ├─ index.js
 └─ main.js

编译后，虽然我们自己定义的 css 文件名为 index.css，但是由于它被 main.js引入了，所以打包出来的文件名变成了 main.css。

559.js 是单独打包的第三方库 axios。

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦,第1张

1_没有hash.png

每一次编译后，生成的文件名都一样，这样会存在一个问题，通过 webpack 编译生成的静态文件会被我们放置到服务器中，当编译后的文件更新时，由于浏览器或者服务器设置的缓存策略，同名文件可能不会立刻被更新，导致用户访问到的仍然是上一次的版本。

hash

为了解决这个问题，我们通常会在文件名上加一些哈希值，保证当更新文件时，浏览器会重新下载资源。这里使用 hash 这个占位符

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[hash].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[hash].css',
    }),
  ],
};

此时 js 和 css 文件都加上了一串相同的哈希值。

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦,第2张

2_hash.png

当项目里没有文件发生改变时，无论如何重新编译，文件哈希值都不会变。但此时，改变了 index.js 文件，增加一句输出，所有文件的哈希值都会同时改变。

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦,第3张

3_hash情况下更改了一个文件.png

所有文件的哈希值都发生了变化，导致即使只更新了一个文件都需要重新加载所有资源，还是有些浪费性能的。

chunkhash

这里是多入口的项目，只改变了 index.js 这个入口，不希望 main.js 入口的文件也被修改，就可以使用占位符 chunkhash 来解决，另外哈希值比较长，截取八位显示。

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[chunkhash:8].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[chunkhash:8].css',
    }),
  ],
};

可以看到同一个 chunk 打包出来的哈希值是一样的

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦,第4张

4_chunkhash.png

当修改了 css 文件时，只有同 chunk 的 main.js 和 main.css 文件的哈希值发生了改变

不要再傻傻分不清 hash、 chunkhash 和 contenthash啦,第5张

5_只有同一chunk发生改变.png

css 文件是在 main.js 这个 chunk 的，但其实 main.js 本身没有发生任何修改，可以不用重新加载。

contenthash

同一个 chunk 中，部分文件修改导致所有文件的哈希值发生变化的问题，可以使用 contenthash 来解决，contenthash 只和每一个文件的内容有关，内容发生变化，则重新生成哈希值。

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[contenthash:8].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[contenthash:8].css',
    }),
  ],
};

每一个文件生成的哈希值都不一样