# 缓存
# 文件名
在输出时可以根据文件内容生成 hash 值，并且添加到文件名中。这么一来浏览器就可以缓存内容不变的文件，只加载内容有变动的文件。这样通过[contenthash]设置，如下：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: {
index: "./src/index.js",
print: "./src/print.js",
},
output: {
filename: "[name].[contenthash].bundle.js",
// 定义除入口文件以外的chunk文件名称
chunkFilename: "[name].[contenthash].yangxinpeng.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Webpack example",
template: "./index.html",
}),
],
optimization: {
splitChunks: {
chunks: "all",
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
···
Asset Size Chunks Chunk Names
index.83c16eca727f08a4d92d.bundle.js 6.96 KiB index [emitted] [immutable] index
index.html 438 bytes [emitted]
print.7957f1c0161bbfd49bc8.bundle.js 6.95 KiB print [emitted] [immutable] print
vendors~index~print.598c551f6c71faacff10.yangxinpeng.js 550 KiB vendors~index~print [emitted] [immutable] vendors~index~print
···
1
2
3
4
5
6
7
2
3
4
5
6
7
注意
热更新会影响[contenthash]的使用。
# 提取引导模板
有时候在你未改动代码及配置下重复打包，输出文件的文件名的 hash 值依旧会发生变动。这时候你可以查看输出的文件中是否包含runtimer文件 （未改名）。如果不存在runtimer文件，那么很有可能 webpack 把引导模板代码也写入bundle文件里了。当引导模板代码改变时，文件的[contenthash]也会发生变动。那么我们可以将引导模板代码单独提取出成一个chunk文件。
注意
并不是所有 webpack 版本都会导致这种情况，但为了保险起见，还是推荐进行以下步骤。
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
chunkFilename: "[name].[contenthash].yangxinpeng.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Webpack example",
template: "./index.html",
}),
],
optimization: {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
···
Asset Size Chunks Chunk Names
index.html 437 bytes [emitted]
main.0240dc2d7b4c1ba1f4ad.yangxinpeng.js 853 bytes main [emitted] [immutable] main
runtime.acfdeda3904d25c72cbb.bundle.js 6.12 KiB runtime [emitted] [immutable] runtime
vendors~main.1623a669fc6bbaaa79aa.yangxinpeng.js 550 KiB vendors~main [emitted] [immutable] vendors~main
···
1
2
3
4
5
6
7
2
3
4
5
6
7
# 模块标识符
将提取引导模板例子中wepack.config.js的mode参数改为production，再进行打包。
// index.js
import _ from "lodash";
console.log("index：" + _.join(["www", "hxin", "link"], "."));
// print.js
import _ from "lodash";
console.log("print：" + _.join(["杨", "信", "鹏"], ""));
1
2
3
4
5
6
7
2
3
4
5
6
7
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
chunkFilename: "[name].[contenthash].yangxinpeng.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Webpack example",
template: "./index.html",
}),
],
optimization: {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
···
Asset Size Chunks Chunk Names
index.html 397 bytes [emitted]
main.7a172fa699d85029aad3.yangxinpeng.js 188 bytes 0 [emitted] [immutable] main
runtime.58908f3dbdb804a00215.bundle.js 1.46 KiB 1 [emitted] [immutable] runtime
vendors~main.089de3de3a4106e96a6b.yangxinpeng.js 71.3 KiB 2 [emitted] [immutable] vendors~main
···
1
2
3
4
5
6
7
2
3
4
5
6
7
改动index.js文件，引入一个模块，再进行打包。
import "./print";
import _ from "lodash";
console.log("index：" + _.join(["www", "hxin", "link"], "."));
1
2
3
2
3
···
Asset Size Chunks Chunk Names
index.html 397 bytes [emitted]
main.446bf4dd7ae0fd391557.yangxinpeng.js 246 bytes 0 [emitted] [immutable] main
runtime.58908f3dbdb804a00215.bundle.js 1.46 KiB 1 [emitted] [immutable] runtime
vendors~main.0be72adf6105c8086c4f.yangxinpeng.js 71.3 KiB 2 [emitted] [immutable] vendors~main
···
1
2
3
4
5
6
7
2
3
4
5
6
7
只改动了index.js文件，照理来说应该只有main.js的contenthash会改变，loadsh分离出来的vendors~main.js的contenthash不应该改变。这种结果是不合理的，试想一下，你只改动了业务逻辑代码，第三方库的文件名却发生变动，导致浏览器缓存失效，这样会需要更多的时间去重新下载内容完全一致的文件。
其实这是因为缓存模块 id 发生了变动，当另一个文件通过模块 id 引入时，其内容就会发生改变，即使是很小的改动，也会导致contenthash发生改变。例如：
- # id 文件名
- # 0 index.js
- # 1 lodash
- import(index.js) -> import(0)
- import(lodash) -> import(1)
+ # id 文件名
+ # 0 index.js
+ # 1 print.js
+ # 2 lodash
+ import(index.js) -> import(0)
+ import(print.js) -> import(1)
+ import(lodash) -> import(2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意
如果模式是开发环境（mode:development），就不会发生改情况，因为该模式是通过文件路径作为 Key 来引入的。
那我们可以更改模块的命名方式，采用 hash 而非自增 id。如下：
const path = require("path");
// const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
chunkFilename: "[name].[contenthash].yangxinpeng.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Webpack example",
template: "./index.html",
}),
// 如果你的版本不支持 moduleIds: "hashed"，那么可以尝试下方法
// new webpack.HashedModuleIdsPlugin(),
],
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
chunks: "all",
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
注意
如果你的版本不支持optimization.moduleIds: "hashed"，那么可以尝试使用HashedModuleIdsPlugin。
← 代码分离 SplitChunkPlugin →