前言：

当我们把打包后的dist文件部署到server上后，client（浏览器）就能够访问此 server 的网站及其资源，而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存) 的技术。
可以通过命中缓存，以降低网络流量，使网站加载速度更快。然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本（不会去向服务器请求更新后的资源）。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

1. 修改输出文件的文件名

如果我们像原来一样定义dist文件夹内的文件名，那么我们的代码就算修改了文件名也不会改变，也不会被浏览器检测到更新，因此，我们需要在我们修改代码后，连同文件名也一起修改。

我们可以通过替换 output.filename 中的 substitutions 设置，来定义输出文件的名称。webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。其中，[contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时，[contenthash] 也会发生变化。

  1. output: {
  2.   // filename改成这样，用[contenthash]代替bundle，并且把JS代码都放到script内
  3.   filename: 'scripts/[name].[contenthash].js', 
  4.   path: path.resolve(__dirname, './dist'),
  5.   clean: true,
  6.   assetModuleFilename: 'images/[contenthash][ext]'
  7. },

image.png
image.png

2.缓存第三方库

我们可以看到，_loadsh以及runtime都是我们需要，且一直不变的资源
可使用 optimization.runtimeChunk 选项将 runtime 代码拆分为一个单独的 chunk。将其设置为 single 来为所有 chunk 创建一个 runtime bundle
将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法，这是因为，它们很少像本地的源代码那样频繁修改。因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存来消除请求，并减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致。

  1.   optimization: {
  2.     runtimeChunk: 'single',
  4.     splitChunks: {
  5.       cacheGroups: {
  6.         vendor: {
  7.           // 将node_modules内的资源都打包到vendors下
  8.           test: /[\\/]node_modules[\\/]/,
  9.           name: 'vendors',
  10.           chunks: 'all',
  11.         },
  12.       },
  13.     },
  14.   }

image.png
image.png
再次打包时，就是从缓存里拿了
image.png