webpack基础篇（六）：缓存 caching（hash）

前言

可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

通过必要的配置，以确保 webpack 打包生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。

1. 输出文件的文件名(output filename)

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

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another_module.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

执行webpack可以看到打包出的js文件已经带有 contenthash

执行npx webpack-dev-server可以看到页面加载正常，控制台打印结果也是正常的

2. 缓存第三方库

将第三方库(library)（例如 lodash ）提取到单独的 vendor chunk 文件中，是比较推荐的做法，这是因为，它们很少像本地的源代码那样频繁修改。因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存来消除请求，并减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致。 我们在 optimization.splitChunks 添加如下 cacheGroups 参数并构建：

webpack.config.js

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        // layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
        // 可以单独打包，从而复用
        // 如果项目中没有，请删除
        layouts: {
          name: "layouts",
          test: path.resolve(__dirname, "../src/layouts"),
          priority: 40,
        },
        // 如果项目中使用element-plus，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
        // 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
        // 如果项目中没有，请删除
        elementUI: {
          name: "chunk-elementPlus",
          test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
          priority: 30,
        },
        // 将vue相关的库单独打包，减少node_modules的chunk体积。
        vue: {
          name: "vue",
          test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
          chunks: "initial",
          priority: 20,
        },
        libs: {
          name: "chunk-libs",
          test: /[\\/]node_modules[\\/]/,
          priority: 10, // 权重最低，优先考虑前面内容
          chunks: "initial",
        },
      }
    }
  },
};

执行webpack可以看到打包结果中分出了多个文件

执行npx webpcak-dev-server可以看到页面加载正常

3. 将 js 文件放到一个文件夹中

webpack.config.js

module.exports = {
  // ...
  output: {
    // filename 在前面加上路径即可
    filename: 'js/[name].[contenthash].js',
  },
};

结合之前的文章、，目前为止，我们已经把 JS 文件、css文件及images、fonts等资源文件分别放到了 js 、 styles 、 images 三个文件夹中。

如果有用，就点个赞吧(\*^▽^\*)