Webpack5 cacheGroups

文章目录

  • 一、 cacheGroups是什么,有什么用?
  • 二、怎么使用cacheGroups?
  • 三、cacheGroups实际应用之一


一、 cacheGroups是什么,有什么用?

在Webpack 5中,cacheGroups是用于配置代码拆分的规则,它可以帮助你更细粒度地控制生成的代码块。

作用:

  1. 将依赖项(第三方库)从应用代码中抽离出来,提高构建速度。
  2. 将应用代码按照自定义的规则拆分成不同的代码块,实现按需加载,减小初始加载的文件大小。

二、怎么使用cacheGroups?

具体用法:
在webpack.config.js中的optimization.splitChunks.cacheGroups对象中配置:

module.exports = {
  // ...其他配置

  optimization: {
    splitChunks: {
      cacheGroups: {
        group1: {
          test: /pattern/,
          name: 'group1',
          chunks: 'initial',
          enforce: true
        },
        group2: {
          test: /pattern/,
          name: 'group2',
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
}

具体参数解释:

  • test: 用于匹配模块的正则表达式。
  • name: 指定生成的代码块的名称。
  • chunks: 指定应该包含哪些类型的代码块。可选值有initial(初始代码块)、async(按需加载的代码块)和all(所有代码块)。
  • enforce: 设置为true时,强制生成该代码块,即使它可能已经满足了其他的缓存组规则。

通过合理配置cacheGroups,可以根据项目需求将代码拆分成不同的块,提高构建速度和应用的加载性能。

三、cacheGroups实际应用之一

vue项目可以使用cacheGroups抽离一些公共模块,比如layouts(项目页面框架),elementUI或者其他ui组件库,vue,以及都会分离的libs(node_modules目录模块),这里我举例说明的是对 libs 的配置项。

 libs: {
          name: "chunk-libs",//指定了该cacheGroup输出的chunk的名称
          test: /[\\/]node_modules[\\/]/,//表示只有当模块来自于node_modules目录时,才会被打包到该chunk中
          priority: 10, // 权重最低,优先考虑前面内容
          chunks: "initial",//"initial"表示只将初始的chunk(即入口chunk)打包到该cacheGroup中
        },

在Webpack 5中,cacheGroups是用于配置优化代码分割的选项之一。这段代码定义了一个名为"libs"的cacheGroup。

  • name: "chunk-libs"指定了该cacheGroup输出的chunk的名称。
  • test: /[\/]node_modules[\/]/表示只有当模块来自于node_modules目录时,才会被打包到该chunk中。
  • priority: 10指定了该cacheGroup的优先级,值越大,优先级越高。这意味着其他cacheGroup中定义的规则优先级低于该规则,所以在判断模块属于哪个cacheGroup时,会先考虑该规则。
  • chunks: "initial"表示只将初始的chunk(即入口chunk)打包到该cacheGroup中。

综上所述,这段代码的作用是将来自于node_modules目录且属于初始chunk的模块打包到一个名为"chunk-libs"的chunk中,并且该cacheGroup具有最低的优先级(权重最低),优先考虑其他cacheGroup中的规则

你可能感兴趣的:(Webpack5,javascript,前端,webpack,vue.js,node.js)