乐趣区

关于前端:不要再傻傻分不清-hash-chunkhash-和-contenthash-啦

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。

每一次编译后,生成的文件名都一样,这样会存在一个问题,通过 webpack 编译生成的动态文件会被咱们搁置到服务器中,当编译后的文件更新时,因为浏览器或者服务器设置的缓存策略,同名文件可能不会立即被更新,导致用户拜访到的依然是上一次的版本。

hash

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

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

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

当我的项目里没有文件产生扭转时,无论如何从新编译,文件哈希值都不会变。但此时,扭转了 index.js 文件,减少一句输入,所有文件的哈希值都会同时扭转。

所有文件的哈希值都产生了变动,导致即便只更新了一个文件都须要从新加载所有资源,还是有些节约性能的。

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 打包进去的哈希值是一样的

当批改了 css 文件时,只有同 chunk 的 main.js 和 main.css 文件的哈希值产生了扭转

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',
    }),
  ],
};

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

main.js 中减少一行输入,引入的 css 内容没有发生变化,css 文件也不会更改哈希值。

总结

在 webpack 中有三种生成哈希值规定的形式,能够用来辨别文件是否批改。

  • hash 与整个我的项目无关,我的项目里有文件批改,所有文件的哈希值都会变动。
  • chunkhash 与入口无关,同一入口的文件被视为一个整体,当其中一个文件批改时,同入口的所有文件哈希值产生扭转。
  • contenthash 只与文件内容无关,文件内容产生扭转,才会更改该文件的哈希值。

善用文件的哈希值,解决浏览器缓存导致的资源未及时更新的问题。

以上就是 webpack 中 hash、chunkhash 和 contenthash 的介绍,更多无关 webpack 的内容能够参考我其它的博文,继续更新中~

退出移动版