4-10 webpack 与浏览器缓存（caching）

1.简介

浏览器在加载资源时，为了提高效率，会使用一定的缓存策略，比如强缓存，与协商缓存，那么如何保证在资源发布以后浏览器能拿到最新的资源而不是缓存呢？

2. filename 和 chunkFilename

我们先来了解一下 output 中这两个字段的作用，如下：

// index.js
import _ from 'lodash';
import $ from 'jquery';

const dom = $('<div>');
dom.html(_.join(['index', 'loaded'], ' '));
$('body').append(dom);

output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "[name].js"
    },

打包后如下：

image.png

可以看到输出的资源名是 [name].js，现在修改一下 filename 如下： ··· output: { path: path.resolve(__dirname, '../dist'), filename: "[name].bundle.js" }, ··· 重新打包：

image.png

然后，我们进行如下修改：

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },

如下：

image.png

阅读以文档可以知道，filename 使用来控制 entry chunk ，而 chunkFIlename 是用来控制 non-entry chunk 的。 我们还可以使用更多的占位符，比如 ，id, hash 等来控制输出名称。

3. 资源更新

我们来看一个例子，进入 dist 目录，开启一个服务器如下：

image.png

打开 http://127.0.0.1:8080，然后刷新

image.png

我们可以看到第一次从服务器获取资源，第二次是 from memory cache。

修改一下 index.js 如下：

// index.js
import _ from 'lodash';
import $ from 'jquery';

const dom = $('<div>');
dom.html(_.join(['index', 'loaded11'], ' '));
$('body').append(dom);

刷新发现如下：

image.png

但如果我们直接利用 webstorm 打开该 html，如下：

image.png

其实 dist 资源已经更新了，但是浏览器发出的资源请求名称并没有改变，在访问我们的服务器资源时，就会直接读取缓存，我们试着在改变 index.js，可以发现访问 webstorm 服务器的页面又更新了，但是访问自己的服务器的页面依然没有更新。这是由于 webstorm 服务器自动开启了协商缓存功能，但是我们的服务器没有开启。

那么对于没有开启协商缓存功能的服务器，如何更新资源呢？

4. contenthash

contenthash 占位符，是根据内容生成的 hash，内容不变，hash 就不变，如下：

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "[name].[contenthash].js",
        chunkFilename: "[name].[contenthash].js"
    },

打包两次看一下：

image.png

image.png

发现 hash 值是一样的。我们打开 server，然后修改一下 index.js

dom.html(_.join(['index', 'loaded2'], ' '));

刷新浏览器：

image.png

发现 idnex 由于内容更新，导致 hash 更新，重服务器获取了新的资源，而 verndors~index 则还是原来的 hash，所以从缓存直接读取。

5. 小结

实际开发中，devserver 已经默认开启协商缓存，开发时其实不大必要设置 contenthash，但是在生产环境中还是应该使用该占位符来标识资源。

参考

浏览器的协商缓存与强缓存 https://webpack.js.org/configuration/output/#outputfilename https://webpack.js.org/configuration/output/#outputchunkfilename