webpack基础(9).缓存

webpack打包后，会生成一个 dist 目录，打包后的内容就会放置在这个目录下。
只要 dist 目录中的内容部署到了 server 上，client （通常指浏览器）就能够访问这个server 的网站及其资源。
然鹅获取资源这一步是比较耗费时间的，因此浏览器使用了缓存技术，降低网络流量，让页面加载更快。
但是，如果我们部署的时候不更新文件名，浏览器就可能会认为这个文件没有修改，就会使用这个文件的缓存版本。这样就没有用到我们的新代码。

因此，本章通过必要的配置，确保 webpack 编译生成的文件既能够被浏览器缓存，又能在文件内容改变后请求到新的文件。

一、输出文件的文件名

通过替换 output.filename的 substitution设置，来定义输出文件的名称。

webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。

其中， [contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时， [contenthash] 也会发生变化。

webpack.config.js

mudule.exports = {
  output: {
    filename: '[name].[contenthash].js'
  }
}

打包后的文件就像这样，每次改变文件的内容，文件名中的hash值都会改变。

二、缓存第三方库

一些第三方库，很少像本地源代码那样频繁更改，因此可以给他整个缓存。

将第三方库（比如loadash）提取到单独的 vender chunk 里面，是比较推荐的做法。

通过 client 的长效缓存机制，命中缓存来减少请求，并减少向 server 获取请求。同时还能保证 server 和 client 代码版本一致。

webpack.config.js
在optimization.splitChunks 添加如下 cacheGroups 参数

mudule.exports = {
  optimization: {
    splitChunks: {
      chacheGroups: { // *将第三方文件缓存起来。
        vendor: {
          test: /[\\/]node_modules[\\/]/, // *获取的是node_modules里面的文件
          name: 'venders',
          chunks: 'all'
        }
      }
    }
  }
}

打包后发现第三方文件都打包在了这个vender.bundle.js里面了。因为名称没有变，所以浏览器每次就会获取它缓存里面的内容，就达到了我们把第三方文件进行缓存目的了。

三、将 js 文件放在一个文件夹中

mudule.exports = {
  output: {
    filename: 'scripts/[name].[contenthash].js'
  }
}

打包后发现 js 文件都放在 scripts 文件夹里面了。