Webpack 生产环境性能优化之缓存配置

概述

---

webpack 的打包速度一直是我们比较关注的问题，接下来我们如何通过设置缓存来提高打包速度，而缓存的设置主要基于以下两个方面：

1、babel编译结果的缓存

2、资源文件的缓存

babel编译结果的缓存

---

可能有些小伙伴会有一个疑问：babel编译结果的缓存 和 HMR 是不是有点功能重叠？ 对于这个问题，我们需要搞明白一个事情，HMR 是使用在 development 环境的，也就是跟 webpack-dev-server 相关的。但是在生产环境，我们没法使用HMR，所以我们需要使用缓存 babel 编译的结果，这样可以有效提高生产环境的打包速度。

配置的方法也是非常的简单：

开启babel缓存

注意：缓存会在第二次才起作用

资源文件的缓存

---

在浏览器端，我们经常会为一些静态资源文件（css, js等）文件设置缓存，这样可以大大提高站点的可访问性，但是也会引发一个问题：如果在缓存有效期内，我们的资源文件需要做紧急变更，那我们应该怎么处理呢？其中一种常用的方法就是为资源文件添加 hash 值。而 webpack 可以很好的支持这种方案，默认用到的 hash 值是 webpack 自动生成的，类似于每一次打包对应的编号。对于这种方案， 我们需要思考一个问题：

默认情况下，js 文件和 css 文件会使用同一个 hash 值。但是当我们修改 js 文件后并使用 webpack 进行打包，打包出来的 css 文件名也会改变（因为这时候有了新的 hash 值），那么浏览器端的 css 文件缓存也会失效，这显然不是我们想要的！

webpack 还引入了 chunkhash 这个概念。webpack 会根据 chunk 来生成 hash 值，如果打包来源于同一个 chunk，那么 hash 值就一样：

使用一般的 hash:  filename:"js/bundle.[hash:7].js"

使用 chunkhash：filename:"js/bundle.[chunkhash:7].js"

使用 chunkhash 是不是就能保证 css 和 js 使用的 hash 值不一样呢？答案是不行，如果我们是在 js 里面引入了 css文件的话，这时候它们两个属于同一个 chunk， 所以最后的 hash 值还是一样的！一般情况下，入口文件引入的所有文件都会跟它成为一个 chunk。

所幸的是 webpack 还提供了另外一种 hash 方案：contenthash。contenthash 会根据文件的内容来生成 hash 值， 不同文件的 hash 值一定不一样，这样就能真正解决我们的问题了！而 contenthash 的使用方法跟前两种 hash 方案是一样的。

结语

---

对于缓存方面的优化，我们已经分析完了，有兴趣的小伙伴可以自己动手试一下，同时也可以试着