Skip to content

记录一下webpack的chunks #9

@dravenww

Description

@dravenww

webpack的chunks是通过webpack内部的一个插件来实现的,在3版本及以前使用的是CommonsChunkPlugin;在4版本后开始使用SplitChunksPlugin,我们对于3版本及以前的不做解释,着眼未来,我们来看SplitChunksPlugin;我们根据配置来看:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

上面是webpack的默认配置,splitChunks就算你什么配置都不做它也是生效的,源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。

chunks意思为拆分模块的范围,有三个值:async、all和initial;三个值的区别如下:

  • async表示只从异步加载得模块里面进行拆分,也就是动态加载import();
  • initial表示只从入口模块进行拆分;
  • all的话,就是包含上面两者,都会去拆分;
    上面还有几个参数:
  • minChunks,代表拆分之前,当前模块被共享的次数,上面是1,也就是一次及以上次引用,就会拆分;改为2的话,就是两次及以上的引用会被拆分;
  • minSize:生成模块的最小大小,单位是字节;也就是拆分出来的模块不能太小,太小的话进行拆分,多了一次网络请求,因小失大;
  • maxAsyncRequests:用来限制异步模块内部的并行最大请求数的,也就是是每个动态import()它里面的最大并行请求数量,需要注意的是:
    • import()本身算一个;
    • 只算js的,不算其他资源,例如css等;
    • 如果同时又两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来;
  • maxInitialRequests:表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制,不至于拆分出太多模块导致请求数量过多而得不偿失,需要注意的是
    • 入口本身算一个请求,
    • 如果入口里面有动态加载的不算在内;通过runtimeChunk拆分出的runtime不算在内;只算js的,不算css的;
    • 如果同时又两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来;
  • automaticNameDelimiter:这是个连接符,不用关注这个;
  • name:该属性主要是为了打包后文件的命名,使用原名字命名为true,按照默认配置,就会是文件名~文件名.**.js
  • cacheGroup:cacheGroups其实是splitChunks里面最核心的配置,splitChunks就是根据cacheGroups的配置去拆分模块的,
    • test:正则匹配路径,表示只筛选从node_modules文件夹下引入的模块,所以所有第三方模块才会被拆分出来。
    • priority:优先级,上面的default的优先级低于vendor;
    • minChunks:这个其实也是个例子,和父层的含义是一样的,不过会覆盖父层定义的值,拆分之前,模块被共享使用的次数;
    • reuseExistingChunk:是否使用以及存在的chunk,字面意思;
      注意:
  • cacheGroups之外设置的约束条件比如说默认配置里面的chunks、minSize、minChunks等等都会作用于cacheGroups,cacheGroups里面的值覆盖外层的配置;
  • test、priority、reuseExistingChunk,这三个是只能定义在cacheGroup这一层的;
  • 如果cacheGroups下面的多个对象的priority相同时,先定义的会先命中;

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions