webpack打包详细说明

webpack概念module、chunk和bundle

  • module:js的模块化,简单说就是通过import引入的代码
  • chunk:webpack根据功能拆分的代码块,包含三种情况
    • 项目入口entry
    • 通过import()动态引入的代码
    • 通过splitChunks拆分出来的代码
  • bundle:webpack打包后的各个文件,对chunk编译压缩打包后的产物。

webpack认配置

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.chunk

  • async表示只从异步加载得模块(动态加载import())里面进行拆分
  • initial表示只从入口模块进行拆分
  • all表示以上两者都包括

webpack.splitChunks.chunk.cacheGroups

cacheGroups会继承认配置里面的chunks、minSize、minChunks等等,除了test, priorityreuseExistingChunk,这三个是只在cacheGroup这一层生效。

webpack.splitChunks.chunk.maxInitialRequests

限制入口的拆分数量

  • 入口文件本身算一个请求
  • 如果入口里面有动态加载得模块这个不算在内
  • 通过runtimeChunk拆分出的runtime不算在内
  • 只算js文件的请求,css不算在内
  • 同时有两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来

webpack.splitChunks.chunk.maxAsyncRequests

限制异步模块内部的并行最大请求数,可以理解为是每个import()它里面的最大并行请求数量

  • import()文件本身算一个请求
  • 并不算js以外的公共资源请求比如css
  • 同时有两个模块满足cacheGroup的规则要进行拆分,但是maxAsyncRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来

其它

  • cacheGroup必须同时满足各个条件才能生效
  • splitChunks的配置项都是作用于cacheGroup上的,如果将cacheGroup的认两个分组vendor和default设置为false,则splitChunks就不会起作用
  • minChunks、maxAsyncRequests、maxInitialRequests的值必须设置为大于等于1的数
  • 当chunk没有名字时,通过splitChunks分出的模块的名字用id替代,当然也可以通过name属性自定义
  • 当父chunk和子chunk同时引入相同的module时,并不会将其分割出来而是删除掉子chunk里面共同的module,保留父chunk的module,这个是因为 optimization.removeAvaliableModules 认是true
  • 当两个cacheGroup.priority相同时,先定义的会先命中
  • 除了js,splitChunks也适用于css

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...