开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情
前言
这一篇主要写了如何通过optimization.runtimeChunk让文件能够更好的进行缓存,来提高用户的体验！
Network Cache
在开发时我们对静态资源会使用 Preload / Prefetch 缓存来优化,这样浏览器第二次请求资源就能读取缓存,请求的速度就会很快，但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，假如文件内容更改，但是文件名没有变化,这样就会导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新。所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了。所以前面我们已经将打包生成的文件名都加上了hash值，这样每次打包只要文件内容发生了变化文件名就会发生变化。
// webpack.prod.js
......
assetModuleFilename: "static/media/[name].[hash:8][ext]", // 图片、字体等资源命名方式(注意用hash)
......
但是这样就会发现进行缓存之后,A文件改变,B文件引用A文件，会因为A文件文件名发生变化(hash值),导致在B文件也发生更改，从而B文件也需要重新进行打包,那如果很多文件都引用了A文件，就会导致很多文件缓存失效,所以为了更好地进行缓存我们就可以用到下面的方法！
使用
为了解决这个问题我们可以将hash值单独保存在一个文件中,这个文件只保存文件的hash值和它们与文件关系，这样这个文件体积也不会太大，重新请求这个文件也不会有太大的负荷。实现这个功能只需要进行如下配置(参考官方文档):
// webpack.prod.js
// 提取runtime文件
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
},
完成如上配置，再次进行打包会发现生成一个runtime.js的文件，存放的就是hash值和文件的关系，这样A文件更改就不会影响到B文件，从而让浏览器能够更好的进行缓存，提高用户的使用体验！
小结
通过以上简单的配置就可以完成文件缓存的优化，来提高性能！今天是更文的第15天，继续加油，不断学习进步！
