8.Webpack：hash 值

分类

1. fullhash
2. chunkhash
3. contenthash

• fullhash：所有构建产物均使用相同的 hash。这意味着修改任何一个文件，所有文件的 hash 值都将会被改变
• chunkhash：同一 chunk 下的文件使用相同的 hash。修改在同一个 chunk 中的文件，同属该 chunk 的所有文件 hash 值都会改变
• contenthash：不同的文件使用不同的 hash。每个文件都会根据自己的文件内容生成 hash 值，互不干扰。

  一个 chunk 可能包含 js, js.map, css, 字体文件 等多个文件

注意点：moduleId 变化也会改变 chunkhash 值

1. 在文件add.js前面随便添加pre.js文件
2. 在打包过程，add.js的 moduleId 变化了，导致 chunkhash 值也跟着改变

解决方案

• 指定 chunkId

{
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'deterministic'
  }
}

如何配合缓存策略

1. contenthash 做文件级别的。按理的话，用他是最好的

问题一：index.js引入a.css，js 和 css 文件分别用什么 hash

1. index.js和a.css用同一个 chunkhash，因为 chunkhash 根据入口的依赖决定
2. 这样就存在一个问题：index.js变化，chunkhash 就会变化。如果a.css用 chunkhash 那就会导致缓存失效。
3. 所以：css 用 contenthash，js 用 chunkhash 或者 contenthash 都行

问题二：静态资源的 hash 是什么？

1. 静态资源，如字体、图片的 hash。不是 webpack 构建的 hash。
2. 是对应 file-loader，通过文件内容计算出来的。

问题三：什么资源用 chunkhash 合适？

1. 把公共依赖库和程序入口文件隔离，并单独打包配置 chunkhash。

协商缓存和强缓存的使用，并且怎么进行资源刷新？

强缓存：

1. 静态资源
2. 第三方库、框架、公共代码库等不怎么变化的资源

协商缓存

1. HTML：可能包含动态内容，比如引入 js 文件
2. CSS 和 JS：经常变化的内容。（不过对于业务场景，目前常用的方式：入口 html 设置协商缓存，其他资源全部走强缓存）

怎么做资源刷新？

1. 通过在 URL 后面添加查询参数 V=xxx （可以是时间戳）刷新。（这里需要 nginx 服务配置对应缓存策略：no-cache）
2. 修改文件名（如 hash 值）
3. 前端在文件内使用 build 后，生成一个 hash 值，在发送请求的时候携带过去。后端校验 header。（适用于用户正在使用页面的情况）