1.簡介

瀏覽器在加載資源時(shí)，為了提高效率，會(huì)使用一定的緩存策略，比如強(qiáng)緩存，與協(xié)商緩存，那么如何保證在資源發(fā)布以后瀏覽器能拿到最新的資源而不是緩存呢？

2. filename 和 chunkFilename

我們先來了解一下 output 中這兩個(gè)字段的作用，如下：

// 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，現(xiàn)在修改一下 filename 如下：
···
output: {
path: path.resolve(__dirname, '../dist'),
filename: "[name].bundle.js"
},
···
重新打包：

image.png

然后，我們進(jìn)行如下修改：

    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. 資源更新

我們來看一個(gè)例子，進(jìn)入 dist 目錄，開啟一個(gè)服務(wù)器如下：

image.png

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

image.png

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

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

刷新發(fā)現(xiàn)如下：

image.png

但如果我們直接利用 webstorm 打開該 html，如下：

image.png

4. contenthash

contenthash 占位符，是根據(jù)內(nèi)容生成的 hash，內(nèi)容不變，hash 就不變，如下：

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

打包兩次看一下：

image.png

image.png

發(fā)現(xiàn) hash 值是一樣的。我們打開 server，然后修改一下 index.js

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

刷新瀏覽器：

image.png

發(fā)現(xiàn) idnex 由于內(nèi)容更新，導(dǎo)致 hash 更新，重服務(wù)器獲取了新的資源，而 verndors~index 則還是原來的 hash，所以從緩存直接讀取。

5. 小結(jié)

實(shí)際開發(fā)中，devserver 已經(jīng)默認(rèn)開啟協(xié)商緩存，開發(fā)時(shí)其實(shí)不大必要設(shè)置 contenthash，但是在生產(chǎn)環(huán)境中還是應(yīng)該使用該占位符來標(biāo)識(shí)資源。

參考

瀏覽器的協(xié)商緩存與強(qiáng)緩存
https://webpack.js.org/configuration/output/#outputfilename
https://webpack.js.org/configuration/output/#outputchunkfilename