webpack与浏览器缓存(Caching)

0.jpg

环境准备

因为浏览器缓存这一块相对于前面的讲解较独立，所以我们重新搭建一下业务代码，并对webpack配置做简单的修改

// index.js
import _ from 'lodash'
import $ from 'jquery'
const dom = $('div')
dom.html(_.join(['hello', 'world'], ' '))
 $('body').append(dom)

这个时候执行打包呢，控制台会报一些警告，我们可以在webpack.common配置中将performance设为false，可以看下官网这个参数的意思哈，其实就是关于打包性能的，我们可以自定义一些警告的阈值，另外我们为了避免干扰，暂时将production模式下的source map关掉，然后执行打包，生成如下目录

|--dist
  |--index.html
  |--main.js
  |--vendors~main.chunk.js

然后我们配置splitChunks.cacheGroups.vendors为

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    name: 'vendors'
}

再打包生成如下目录

|--dist
  |--index.html
  |--main.js
  |--vendors.chunk.js

上面的配置都讲过，可以回顾一下，这样我们就把准备环境搭建起来了。

浏览器缓存

我们最终打包出来的文件是要放到服务器上的，现在我们先在本地运行一下打包好的index.html,打开network做监控，会发现当运行页面时会加载下面这样的资源

network.PNG

我们加载页面后，会加载两个js文件，当我们再次刷新页面的时候，其实这两个js文件已被保存在缓存里了，我们是取的缓存
假设，现在修改了js源代码，重新做了打包，再次放到服务器上运行，那么我们做普通页面刷新（区别于强制刷新），看到的将还是旧代码，因为我们的文件名字都没有变化，再次访问还是会从缓存里面取，这就存在了问题，为了解决这一问题，我们引入下面的概念

content Hash

我们将output中的filename和chunkFilename分别提取到dev和prod配置中，其中本地的还取原来的值就可以，因为本地我们每次都是单独打包单独运行，包括热模块更新都会帮我们解决浏览器的缓存问题，但是生产模式下使我们需要解决的，我们将其配置成下面这样

    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js'
    }

其中的contentHash和name一样是一个出口的占位符，其含义顾明思义是当文件内容改变才发生改变，他是根据'content'生成的一个hash字符串，我们先来打包试试
我们可以看到哈，生成的文件中，假如了hash字符串这样的内容，我们刚才说只要文件内容不变，那么hash就不会变，下面我们验证一下，我们不改变文件内容，直接打包，这时候对比上次的hash，发现并没有变化，这就意味我们我们不改变源代码直接打包上线，文件名不发生变化，是会取缓存的。
下面我们对源代码做一下改变,然后重新打包，我们发现，main的hash变了，但是vendors的hsah没有变化，因为我们的vendors里面放置的lodash和jquery两个库，这两个库没有变化，所以他的hash也不会变，这时候如果做代码上线，我们就会对main.js做重新加载，而对vendors取本地缓存
contentHash这种形式，可以做到，重新打包代码上线的时候，用户只更新有变化的代码，没有变化的代码用户可以直接用本地缓存

对于老版本webapck V4

如果你使用的webpack4的版本比较老，可能会出现即使你没有修改文件内容，但hash依然改变的情况，为解决这以问题，你需要在optimization中配置runtimeChunk

runtimeChunk: {
  name: 'runtime'
}

这样打包的内容不变hash就不会变了，但这时候会新生成一个runtime.js的文件，这是因为

manifest

我们已经知道，业务代码存在于main中，第三方库代码存在于vendors中，但是库和业务逻辑之间也是有关联的，这个关联就是manifest，默认manifest是存在于main也存在于vendors中的，在不同版本的webapck中，manifest可能有差异，（可能存在content不改变改变manifest改变，从而影响其他文件改变）这就导致了上面出现的，旧版本webpack4中，即使没有改变content，hash也会改变。当我们配置了runtimeChunk就会吧manifest中的代码提出来到runtime.js中，这样的话，main和vendors相对独立一点，就不会出现上面的问题了。当然了，新版本的webpack也是可以配置的，大家不放试一试，不过新版本可以不用配置。

总结

这节简单讲了讲webpack和浏览器缓存之间的关系，讲解了contenthash的意义和用法，同时也将了关于旧版本webapck中处理方式，其实对于最新版本的webpack来说，是不用太多配置的，大家知道如何处理老版本的问题后，还是建议把webpack版本升到最新~这样就能享受更多的API了。