webpack4之splitChunks.maxInitialRequests

于 2020-01-26 21:17:07 发布
阅读量848 收藏 1
点赞数 1
分类专栏： Webpack4.0基础教程 前端系列周刊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YaoDeBiAn/article/details/104087565
版权

概要

同maxAsyncRequests配置类似，该配置表示入口点能被拆分的最大数量。

准备工作

  1. 目录
root
——dist（打包之后的文件夹）
——node_modules（下载的包）
——src（项目脚本目录）
————entry（入口点脚本）
————modules（入口点中引入的模块）
——package.json（包管理文件）
——webpack.config.js（webpack配置文件）
  1. webpack配置
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    entry1: './src/entry/entry1.js',
    entry2: './src/entry/entry2.js'
  },
  plugins: [
    new CleanWebpackPlugin()
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'initial',
      maxInitialRequests: 2,
      minSize: 1,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
  // default config
  // optimization: {
  //   splitChunks: {
  //     chunks: 'async',
  //     minSize: 30000,
  //     minChunks: 1,
  //     maxAsyncRequests: 5,
  //     maxInitialRequests: 3,
  //     automaticNameDelimiter: '~',
  //     automaticNameMaxLength: 30,
  //     name: true,
  //     cacheGroups: {
  //       vendors: {
  //         test: /[\\/]node_modules[\\/]/,
  //         priority: -10
  //       },
  //       default: {
  //         minChunks: 2,
  //         priority: -20,
  //         reuseExistingChunk: true
  //       }
  //     }
  //   }
  // }
}
  1. package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

案例

接下来，通过几个简单的案例，来分析maxInitialRequests配置的控制规则。

  1. demo1
################################
webpack.config.js:

splitChunks.maxInitialRequests设为2

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
entry/entry1.js:

import add from '../modules/add.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import subtract from '../modules/subtract'

console.log('index', subtract(1, 2))

通过npm run build进行打包，结果如下：

Hash: 1a653fb772ccb33c66ba
Version: webpack 4.41.5
Time: 211ms
Built at: 2020/01/26 下午3:34:06
                   Asset       Size  Chunks             Chunk Names
default~entry1.bundle.js  122 bytes       0  [emitted]  default~entry1
default~entry2.bundle.js  123 bytes       1  [emitted]  default~entry2
        entry1.bundle.js   1.47 KiB       2  [emitted]  entry1
        entry2.bundle.js   1.47 KiB       3  [emitted]  entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
    | ./src/entry/entry1.js 68 bytes [built]
    | ./src/modules/add.js 54 bytes [built]
[1] ./src/entry/entry2.js + 1 modules 140 bytes {1} [built]
    | ./src/entry/entry2.js 81 bytes [built]
    | ./src/modules/subtract.js 59 bytes [built]

add.js和subtract.js被分别打包到default~entry1.bundle.js和default~entry2.bundle.js。

  1. demo2
################################
webpack.config.js:

splitChunks.maxInitialRequests设为1

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
entry/entry1.js:

import add from '../modules/add.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import subtract from '../modules/subtract'

console.log('index', subtract(1, 2))

打包结果如下：

Hash: ec010da1fdddf9f25905
Version: webpack 4.41.5
Time: 210ms
Built at: 2020/01/26 下午7:27:35
           Asset       Size  Chunks             Chunk Names
entry1.bundle.js  976 bytes       0  [emitted]  entry1
entry2.bundle.js  977 bytes       1  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
    | ./src/entry/entry1.js 68 bytes [built]
    | ./src/modules/add.js 54 bytes [built]
[1] ./src/entry/entry2.js + 1 modules 140 bytes {1} [built]
    | ./src/entry/entry2.js 81 bytes [built]

两个入口点引入的包都没有被打包出来，符合设置的最大值1。

  1. demo3
################################
webpack.config.js:

splitChunks.maxInitialRequests设为1

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
modules/module.js

import add from './add'

export default function () {
  console.log(add(3, 4) + 10)
}

################################
entry/entry1.js:

import add from '../modules/module.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import subtract from '../modules/subtract'
import add from '../modules/add'

console.log('index', subtract(1, 2) + add(1, 0))

打包后的结果如下：

default~entry1~entry2.bundle.js  151 bytes       0  [emitted]  default~entry1~entry2
               entry1.bundle.js   1.58 KiB       1  [emitted]  entry1
               entry2.bundle.js   1.56 KiB       2  [emitted]  entry2
Entrypoint entry1 = default~entry1~entry2.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/add.js 54 bytes {0} [built]
[1] ./src/entry/entry1.js + 1 modules 161 bytes {1} [built]
    | ./src/entry/entry1.js 71 bytes [built]
    | ./src/modules/module.js 85 bytes [built]
[2] ./src/entry/entry2.js + 1 modules 190 bytes {2} [built]
    | ./src/entry/entry2.js 126 bytes [built]

两个入口点都引入的add.js被单独打包到default~entry1~entry2.bundle.js，所以结果是，entry1.js被拆分为entry1.bundle.js和default~entry1~entry2.bundle.js，entry2.js被拆分为entry2.bundle.js和default~entry1~entry2.bundle.js，符合设置的最大值2。

  1. demo4
################################
webpack.config.js:

splitChunks.maxInitialRequests设为3

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
modules/module.js

import add from './add'

export default function () {
  console.log(add(3, 4) + 10)
}

################################
entry/entry1.js:

import add from '../modules/module.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import subtract from '../modules/subtract'
import add from '../modules/add'

console.log('index', subtract(1, 2) + add(1, 0))

打包结果为：

Hash: 8f215c580657b26dd448
Version: webpack 4.41.5
Time: 299ms
Built at: 2020/01/26 下午7:49:25
                          Asset       Size  Chunks             Chunk Names
       default~entry1.bundle.js  168 bytes       1  [emitted]  default~entry1
default~entry1~entry2.bundle.js  151 bytes       0  [emitted]  default~entry1~entry2
       default~entry2.bundle.js  152 bytes       2  [emitted]  default~entry2
               entry1.bundle.js   1.47 KiB       3  [emitted]  entry1
               entry2.bundle.js   1.47 KiB       4  [emitted]  entry2
Entrypoint entry1 = default~entry1~entry2.bundle.js default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/add.js 54 bytes {0} [built]
[1] ./src/entry/entry1.js + 1 modules 161 bytes {1} [built]
    | ./src/entry/entry1.js 71 bytes [built]
    | ./src/modules/module.js 85 bytes [built]
[2] ./src/entry/entry2.js + 1 modules 190 bytes {2} [built]
    | ./src/entry/entry2.js 126 bytes [built]
    | ./src/modules/subtract.js 59 bytes [built]

entry1.js被拆分为entry1.bundle.js、default~entry1.bundle.js和default~entry1~entry2.bundle.js，entry2.js被拆分为entry2.bundle.js、default~entry2.bundle.js和default~entry1~entry2.bundle.js。其中default~entry1~entry2.bundle.js为entry1和entry2中均被引入的add.js。

  1. demo5
################################
webpack.config.js:

splitChunks.maxInitialRequests设为2

设置3个入口点：
entry: {
    entry1: './src/entry/entry1.js',
    entry2: './src/entry/entry2.js',
    entry3: './src/entry/entry3.js'
},

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
modules/module.js

import add from './add'
import subtract from './subtract'

export default function () {
  console.log(add(3, 4) + subtract(4, 3))
}

################################
entry/entry1.js:

import add from '../modules/module.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import add from '../modules/add'

console.log('index', add(1, 0))

################################
entry/entry3.js:

import subtract from '../modules/subtract'

console.log('index', subtract(1, 0))

打包结果如下：

Hash: 968a9121c01a2943cab7
Version: webpack 4.41.5
Time: 80ms
Built at: 2020/01/26 下午8:43:08
                          Asset       Size  Chunks             Chunk Names
default~entry1~entry2.bundle.js  152 bytes       0  [emitted]  default~entry1~entry2
       default~entry3.bundle.js  240 bytes       1  [emitted]  default~entry3
               entry1.bundle.js   1.69 KiB       2  [emitted]  entry1
               entry2.bundle.js   1.56 KiB       3  [emitted]  entry2
               entry3.bundle.js   1.47 KiB       4  [emitted]  entry3
Entrypoint entry1 = default~entry1~entry2.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js entry2.bundle.js
Entrypoint entry3 = default~entry3.bundle.js entry3.bundle.js
[0] ./src/modules/subtract.js 59 bytes {1} {2} [built]
[1] ./src/modules/add.js 1.09 KiB {0} [built]
[2] ./src/entry/entry2.js 66 bytes {3} [built]
[3] ./src/entry/entry1.js + 1 modules 212 bytes {2} [built]
    | ./src/entry/entry1.js 71 bytes [built]
    | ./src/modules/module.js 131 bytes [built]
[4] ./src/entry/entry3.js 81 bytes {1} [built]

咱设的是2，对于entry1.js来说，可能将add.js拆分出来，也可能将subtract.js拆分出来，经测试，将add.js拆分出来还是将subtract.js拆分出来，主要是根据这两个文件的大小来决定，优先拆分体积大的模块。

  1. demo6
################################
webpack.config.js:

splitChunks.maxInitialRequests设为2

设置3个入口点：
entry: {
    entry1: './src/entry/entry1.js',
    entry2: './src/entry/entry2.js',
    entry3: './src/entry/entry3.js'
},

################################
modules/add.js:

export default function add (a, b) {
  return a + b
}

################################
modules/subtract.js

export default function subtract (a, b) {
  return a - b
}

################################
modules/module.js

import add from './add'
import subtract from './subtract'

export default function () {
  console.log(add(3, 4) + subtract(4, 3))
}

################################
entry/entry1.js:

import add from '../modules/module.js'

console.log('index', add(1, 2))

################################
entry/entry2.js:

import add from '../modules/add'
import subtract from '../modules/subtract'

console.log('index', add(1, 0) + subtract(1, 0))

################################
entry/entry3.js:

import subtract from '../modules/subtract'

console.log('index', subtract(1, 0))

打包结果如下：

Hash: bc0494313737a69d1121
Version: webpack 4.41.5
Time: 217ms
Built at: 2020/01/26 下午8:51:08
                                 Asset       Size  Chunks             Chunk Names
default~entry1~entry2~entry3.bundle.js  151 bytes       0  [emitted]  default~entry1~entry2~entry3
                      entry1.bundle.js   1.69 KiB       1  [emitted]  entry1
                      entry2.bundle.js   1.67 KiB       2  [emitted]  entry2
                      entry3.bundle.js   1.56 KiB       3  [emitted]  entry3
Entrypoint entry1 = default~entry1~entry2~entry3.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2~entry3.bundle.js entry2.bundle.js
Entrypoint entry3 = default~entry1~entry2~entry3.bundle.js entry3.bundle.js
[0] ./src/modules/subtract.js 59 bytes {0} [built]
[1] ./src/modules/add.js 1.09 KiB {1} {2} [built]
[2] ./src/entry/entry2.js 126 bytes {2} [built]
[3] ./src/entry/entry3.js 81 bytes {3} [built]
[4] ./src/entry/entry1.js + 1 modules 212 bytes {1} [built]
    | ./src/entry/entry1.js 71 bytes [built]
    | ./src/modules/module.js 131 bytes [built]

通过上面这个例子，我们知道，被拆分出来的包如果有两种情况，被引入多次的那个包会被优先打包出来，无论两个包的大小关系如何。

总结

  • maxInitialRequests用来表示入口点能被拆分的最大数量；
  • 如果对于单独打包出来的模块有两种可能，被多次引入的那个模块或模块集会被优先打包出来；
  • 同样的情况，如果两种情况下模块被引用的次数相同，体积大的那个模块或模块集会被打包出来；
  • 如果两种情况下，情况一只包含一个模块，情况二则包含两个模块，并且两种情况下被引入的次数也是相同的，前两条规则仍然有效。
  • 该配置对于chunks为initial和all情况下均可行，对于async无效，同时对按需加载的模块也是无效的；

last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。如果上述内容或许有些错误或者有些个人理解比较偏离实际，还望指出，谢谢！！！

对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。

最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！

YaoDeBiAn
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值