webpack4之简单分析splitChunk.chunks几种情况：initial、async、all，以及function (chunk)

最新推荐文章于 2023-03-09 23:07:58 发布
最新推荐文章于 2023-03-09 23:07:58 发布
阅读量5.5k 收藏 4
点赞数 7
分类专栏： Webpack4.0基础教程 前端系列周刊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YaoDeBiAn/article/details/103653686
版权

webpack的这个属性被用来指定项目中哪些部分将会被优化。

准备工作

  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',
      maxAsyncRequests: 3,
      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"
  }
}

initial

这个值表示项目中被直接引入的模块将会被用于优化。

1. initial_demo1:

################################
webpack.config.js:

splitChunks.chunks设为'initial'

################################
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（个人目前主要使用yarn或npm来进行管理，cnpm不建议使用，有时候会有问题）之后，打包如下：

Hash: 2b419949ee0e8b5f82f1
Version: webpack 4.41.4
Time: 153ms
Built at: 2019/12/22 下午3:04:56
                   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。

注意，这里之所以这两个块能够被split分割出来，是因为我为了方便，将默认的cacheGroups.default.minChunks设置成了1，只要并行请求次数大于等于1就会被拆分出来。

另外，这里仅仅是拆分出来了入口点中的模块，那么如果在引入的模块中又引入了模块呢，会被拆分出来吗。

2. initial_demo2:

################################
webpack.config.js:

splitChunks.chunks设为'initial'

################################
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'

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

npm run build的打包结果为：

Hash: 2d11c0e1c95c35c0182c
Version: webpack 4.41.4
Time: 178ms
Built at: 2019/12/23 下午5:30:41
                   Asset       Size  Chunks             Chunk Names
default~entry1.bundle.js  139 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 + 2 modules 210 bytes {0} [built]
    | ./src/entry/entry1.js 71 bytes [built]
    | ./src/modules/module.js 85 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]

分析一下，entry1中引入了module:

  • entry1.bundle.js与entry2.bundle.js分别是两个入口点entry1和entry2的主体部分；
  • default~entry1.bundle.js是入口点entry1.js中引入的module.js，我们会发现，尽管我们的minChunks设为了1，同时我们的module.js中也引入了add.js，webpack也会把它当作是一个被直接引入的module进行解析。所以我们如果打开这个文件查看，我们能看到如下的代码块：
console.log("index",void console.log(17));

也就是webpack已经将module文件完全解析出来了。

  • default~entry2.bundle.js和demo1中一样，也是将entry2中直接引入的subtract打包后的结果；

3. initial_demo3

################################
webpack.config.js:

splitChunks.chunks设为'initial'

################################
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))

基于demo2，我们在entry2中新增一句对add.js的引用。在打包之前，思考这样一个问题，这个add.js会不会被单独被打包出来呢？

npm run build打包之后，结果如下：

Hash: 8f215c580657b26dd448
Version: webpack 4.41.5
Time: 208ms
Built at: 2020/01/01 上午8:59:55
                          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.bundle.js和entry2.bundle.js与之前的demo相同；
  • default~entry2.bundle.js是对subtract.js打包后的结果；
  • default~entry1.bundle.js是对module.js打包后的结果（当然，这里面没有包含add.js的代码）；
  • default~entry1~entry2.bundle.js是对add.js打包后的结果；

所以，对于上面的问题，当然是ok的啦。

4. initial_demo4

################################
webpack.config.js:

splitChunks.chunks设为'initial'

################################
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)
}

################################
modules/module2.js:

import add from './add'

export default function () {
  console.log(add(5, 6) + 11)
}

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

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

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

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

import add from '../modules/module2'

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

npm run build打包之后如下：

Hash: 28bb1439ac0caa0c0f7f
Version: webpack 4.41.5
Time: 168ms
Built at: 2020/01/01 上午9:27:48
                          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  169 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 160 bytes {2} [built]
    | ./src/entry/entry2.js 70 bytes [built]
    | ./src/modules/module2.js 85 bytes [built]

和demo3相似，default～entry1～entry2.bundle.js将module1和module2中直接引入的add.js模块进行抽离并打包的结果。

initial：基于上面的demo，我们知道当将chunks配置设为initial，即将入口点中直接引入的模块、模块中引入的模块进行拆解并单独打包。（注：这里提到的模块均指直接引入的模块）

async

async这个值表示按需引入的模块将会被用于优化。

上面，我们通过几个demo基本了解了initial配置值的打包规则，接下来，同样通过几个demo的方式，希望借此来掌握async的使用。

1. demo_async1

################################
webpack.config.js:

splitChunks.chunks设为'async'

################################
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('../modules/add.js').then(add => {
  console.log('index', add(1, 2))
})

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

import('../modules/subtract').then(subtract => {
  console.log('index', subtract(2, 1))
})

npm run build，结果如下：

Hash: 68e0920fceede599eec9
Version: webpack 4.41.5
Time: 72ms
Built at: 2020/01/01 下午4:44:10
           Asset       Size  Chunks             Chunk Names
     2.bundle.js  166 bytes       2  [emitted]  
     3.bundle.js  166 bytes       3  [emitted]  
entry1.bundle.js    2.1 KiB       0  [emitted]  entry1
entry2.bundle.js    2.1 KiB       1  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {0} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/modules/add.js 54 bytes {2} [built]
[3] ./src/modules/subtract.js 59 bytes {3} [built]

分析一下其中的打包结果：

  • 2.bundle.js和3.bundle.js分别对应入口点entry1.js和entry2.js中的add.js和subtract.js。

2. demo_async2

################################
webpack.config.js:

splitChunks.chunks设为'async'

################################
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('../modules/module.js').then(add => {
  console.log('index', add(1, 2))
})

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

import('../modules/subtract').then(subtract => {
  console.log('index', subtract(2, 1))
})

基于demo1，我们在entry1中按需引入module.js，module中引入了add.js。

npm run build，打包结果如下：

Hash: d291a90e6547b20a55e9
Version: webpack 4.41.5
Time: 83ms
Built at: 2020/01/01 下午4:49:23
           Asset       Size  Chunks             Chunk Names
     2.bundle.js  141 bytes       2  [emitted]  
     3.bundle.js  166 bytes       3  [emitted]  
entry1.bundle.js    2.1 KiB       0  [emitted]  entry1
entry2.bundle.js    2.1 KiB       1  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {0} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/modules/subtract.js 59 bytes {3} [built]
[3] ./src/modules/module.js + 1 modules 139 bytes {2} [built]
    | ./src/modules/module.js 85 bytes [built]
    | ./src/modules/add.js 54 bytes [built]

打包后，我们可以在2.bundle.js中找到以下的这句：

console.log(3+4+10)

这跟initial场景下的demo2很像，即将module.js完全解析了出来。

3. demo_async3

################################
webpack.config.js:

splitChunks.chunks设为'async'

################################
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('../modules/module.js').then(add => {
  console.log('index', add(1, 2))
})

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

import('../modules/subtract').then(subtract => {
  console.log('index', subtract(2, 1))
})

import('../modules/add').then(add => {
  console.log('add', add(10, 11))
})

npm run build打包结果如下：

Hash: c66566e81e276d0faccb
Version: webpack 4.41.5
Time: 76ms
Built at: 2020/01/01 下午4:50:38
           Asset       Size  Chunks             Chunk Names
     0.bundle.js  166 bytes       0  [emitted]  
     3.bundle.js  171 bytes       3  [emitted]  
     4.bundle.js  166 bytes       4  [emitted]  
entry1.bundle.js   2.12 KiB       1  [emitted]  entry1
entry2.bundle.js   2.17 KiB       2  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 168 bytes {2} [built]
[2] ./src/modules/add.js 54 bytes {0} [built]
[3] ./src/modules/module.js 85 bytes {3} [built]
[4] ./src/modules/subtract.js 59 bytes {4} [built]

module.js被拆分成0.bundle.js（add.js部分）和3.bundle.js，4.bundle.js对应subtract.js。

4. demo_async4

################################
webpack.config.js:

splitChunks.chunks设为'async'

################################
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)
}

################################
modules/module2.js

import add from './add'

export default function () {
  console.log(add(5, 6) + 11)
}

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

import('../modules/module.js').then(add => {
  console.log('index', add(1, 2))
})

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

import('../modules/module2').then(add => {
  console.log('index', add(2, 1))
})

npm run build打包后的结果如下：

Hash: b48649b8fd43369ca09d
Version: webpack 4.41.5
Time: 80ms
Built at: 2020/01/01 下午4:53:11
           Asset       Size  Chunks             Chunk Names
     0.bundle.js  153 bytes       0  [emitted]  
     3.bundle.js  165 bytes       3  [emitted]  
     4.bundle.js  165 bytes       4  [emitted]  
entry1.bundle.js   2.12 KiB       1  [emitted]  entry1
entry2.bundle.js   2.12 KiB       2  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 80 bytes {2} [built]
[2] ./src/modules/module.js 85 bytes {3} [built]
[3] ./src/modules/module2.js 85 bytes {4} [built]
[4] ./src/modules/add.js 54 bytes {0} [built]

3.bundle.js和4.bundle.js分别对应module.js和module2.js，两个模块中的add.js被单独打包为0.bundle.js。

5. async_demo5

################################
webpack.config.js:

splitChunks.chunks设为'async'

################################
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)
}

################################
modules/module2.js

export default function () {
  import('../modules/add.js').then(add => {
    console.log('add', add(1, 2))
  })
}

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

import('../modules/module.js').then(add => {
  console.log('index', add(1, 2))
})

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

import('../modules/module2').then(add => {
  console.log(111)
})

我们将add.js通过按需引入的方式在module.js中引入，打包后结果如下：

Hash: 48720b9b74d7e799b22d
Version: webpack 4.41.5
Time: 77ms
Built at: 2020/01/01 下午5:06:17
           Asset       Size  Chunks             Chunk Names
     0.bundle.js  166 bytes       0  [emitted]  
     3.bundle.js  171 bytes       3  [emitted]  
     4.bundle.js  186 bytes       4  [emitted]  
entry1.bundle.js   2.12 KiB       1  [emitted]  entry1
entry2.bundle.js   2.09 KiB       2  [emitted]  entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 65 bytes {2} [built]
[2] ./src/modules/module.js 85 bytes {3} [built]
[3] ./src/modules/module2.js 113 bytes {4} [built]

0.bundle.js、3.bundle.js、4.bundle.js分别对应add.js、module.js、module2.js。

async: 基于上面的几个demo，我们发现在async场景下，webpack会对那些按需引入的模块进行优化。

all

all这个场景表示无论是按需引入的模块，还是直接引入的模块，都会被用于优化。

在给出这个场景的案例之前，我们先来看一个initial场景下混用按需引入的案例：

################################
webpack.config.js:

splitChunks.chunks设为'initial'

################################
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('../modules/subtract').then(subtract => {
  console.log('index', subtract(2, 1))
})

npm run build打包后结果为：

Hash: f80258369b1c1e4ed339
Version: webpack 4.41.5
Time: 218ms
Built at: 2020/01/01 下午4:24:45
                   Asset       Size  Chunks             Chunk Names
             4.bundle.js  164 bytes       4  [emitted]  
default~entry1.bundle.js  124 bytes       0  [emitted]  default~entry1
default~entry2.bundle.js  145 bytes       1  [emitted]  default~entry2
        entry1.bundle.js   1.47 KiB       2  [emitted]  entry1
        entry2.bundle.js   2.22 KiB       3  [emitted]  entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/subtract.js 59 bytes {4} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
    | ./src/entry/entry1.js 68 bytes [built]
    | ./src/modules/add.js 54 bytes [built]

我们会发现entry2.js中按需引入的subtract被拆分为4.bundle.js和default~entry2.bundle.js，与async场景下不同的是，按需引入后执行的函数（.then的参数）会被单独打包进default~entry2.bundle.js。

然后我们将上述的代码场景改成all，再重新进行打包，结果为：

Hash: f80258369b1c1e4ed339
Version: webpack 4.41.5
Time: 237ms
Built at: 2020/01/01 下午5:20:48
                   Asset       Size  Chunks             Chunk Names
             4.bundle.js  164 bytes       4  [emitted]  
default~entry1.bundle.js  124 bytes       0  [emitted]  default~entry1
default~entry2.bundle.js  145 bytes       1  [emitted]  default~entry2
        entry1.bundle.js   1.47 KiB       2  [emitted]  entry1
        entry2.bundle.js   2.22 KiB       3  [emitted]  entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/subtract.js 59 bytes {4} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
    | ./src/entry/entry1.js 68 bytes [built]
    | ./src/modules/add.js 54 bytes [built]

按理来说，initial管理直接引入的包，async管理按需引入的包。但是，目前initial场景下，按需引入的包被拆分并单独打包出来，那么也就是说，不管怎样，按需加载的包一定会被单独打包出来（事实确实是这样，尽管项目中只按需加载了一次，并且minChunks设置大于1，也是如此）。

另外，我们发现上面的两种场景下，同样的代码，打包出来的配置是一样，这不仅会让我们有一个疑问，就是，initial和all到底有什么区别？

我们根据以下的步骤来分析一波：

  • 我们以前面async的场景中的demo4的代码作为基础；
  • 将chunks改为initial，打包结果如下：
Hash: f700f00520384eac7fc4
Version: webpack 4.41.5
Time: 82ms
Built at: 2020/01/01 下午8:02:09
                   Asset       Size  Chunks             Chunk Names
             4.bundle.js  257 bytes       4  [emitted]  
             5.bundle.js  257 bytes       5  [emitted]  
default~entry1.bundle.js  146 bytes       0  [emitted]  default~entry1
default~entry2.bundle.js  146 bytes       1  [emitted]  default~entry2
        entry1.bundle.js   2.22 KiB       2  [emitted]  entry1
        entry2.bundle.js   2.22 KiB       3  [emitted]  entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/module.js 85 bytes {4} [built]
[1] ./src/modules/module2.js 85 bytes {5} [built]
[2] ./src/entry/entry1.js 78 bytes {0} [built]
[3] ./src/entry/entry2.js 80 bytes {1} [built]
[4] ./src/modules/add.js 54 bytes {4} {5} [built]

4.bundle.js和5.bundle.js分别对应module.js和module2.js，两个模块中的add.js在4.bundle.js和5.bundle.js都被完全解析，没有被分离出去。而default~entry1.bundle.js和default~entry2.bundle.js则分别对应module.js和module2.js两个模块加载完后调用的方法（.then中的参数，这个在前面也提到过）。

所以，这里已经很明显了，针对initial和async两种场景，initial场景下不能将按需引入的模块中引入的模块进行拆解，而async场景下是可以的。而同样的，其实async场景不能拆分直接引入的模块。

你也可以尝试在initial场景下对某个模块引入两次，一次为按需引入，一次为直接引入，你会发现，这个模块将会被打包两次，而不是单独打包一次作为共享块。

  • 接着我们将chunks改成all试试，看看会有怎样的打包结果：
Hash: 02fe278419997010e22d
Version: webpack 4.41.5
Time: 228ms
Built at: 2020/01/01 下午8:24:56
                   Asset       Size  Chunks             Chunk Names
             0.bundle.js  153 bytes       0  [emitted]  
             5.bundle.js  163 bytes       5  [emitted]  
             6.bundle.js  164 bytes       6  [emitted]  
default~entry1.bundle.js  168 bytes       1  [emitted]  default~entry1
default~entry2.bundle.js  168 bytes       2  [emitted]  default~entry2
        entry1.bundle.js   2.22 KiB       3  [emitted]  entry1
        entry2.bundle.js   2.22 KiB       4  [emitted]  entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/module.js 85 bytes {5} [built]
[1] ./src/modules/module2.js 85 bytes {6} [built]
[2] ./src/entry/entry1.js 78 bytes {1} [built]
[3] ./src/entry/entry2.js 80 bytes {2} [built]
[4] ./src/modules/add.js 54 bytes {0} [built]

我们会发现，结果是结合initial和async两种场景的特点，即：按需加载后执行的方法被单独打包、按需加载的模块中引入的模块会被单独打包出来。

到目前为止，想必三种场景下的理解已经差不多了。

Function

最后，splitChunk.chunks还可以是一个函数，这个函数返回一个Boolean型，用来标识chunk是否可以被打包出来。（关于chunk是什么，或者怎样理解，请浏览我的另一篇文章：https://blog.csdn.net/YaoDeBiAn/article/details/103570693）

比如：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks (chunk) {
        // exclude `my-excluded-chunk`
        return chunk.name !== 'my-excluded-chunk'
      }
    }
  }
}

上述函数表示webpack的所有chunk中，除了chunk名为my-excluded-chunk的，其他的chunk都会被打包出来。

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

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

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

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

YaoDeBiAn
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack4 之 splitChunks
weixin_39762508的博客
03-03 880
SplitChunks
详解webpack4之splitchunksPlugin代码包分拆
10-17
Webpack 4 中的 `splitChunksPlugin` 是一个用于优化输出的插件，它允许开发者将共享的代码分离成单独的 chunk，从而实现代码分拆，提高应用的性能和加载速度。在多页面应用中，这个功能尤其重要，因为它能够有效地...
webpack4系列教程（六）：使用SplitChunksPlugin分割代码
qq_38286992的博客
01-10 2883
1. SplitChunksPlugin的概念 起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依赖重复。而在webpack4中CommonsChunkPlugin被移除，取而代之的是 optimization.splitChunks 和 optimization.runtimeC...
webpack高级应用篇（十四）：splitChunks.chunks 中的 async、initial 和 all
知之为知之，不知为不知
05-01 2058
webpack官方文档中对于splitChunks.chunks只说明了 async 是默认的选项，关于 async、initial 和 all 之间的区别却没有很好的进行举例解释。今天我们将来探讨一下这三者的区别。 async表示动态引入的模块将会被拆分； initial表示不会将动态引入和静态引入的同一模块一起处理，而是分开处理。； all对所有类型的模块进行拆分
vue-cli3打包后生成的chunk-vendors文件过大，导致加载太慢,利用SplitChunks插件解决，分离chunk
xiasohuai的博客
06-16 6926
直接使用插件解决这个问题！ 第一步：先下载这个插件 第二步：修改vue.config.js配置文件 const CompressionPlugin = require("compression-webpack-plugin") ............ plugins: [ new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css|less)$/, // 匹配文件名 th...
wepack4 splitchunk
wang9rui的博客
02-21 494
翻译webpack4
Webpack中 SplitChunks 插件用法详解
細水、長流√的专栏
03-01 2329
SplitChunks 插件是什么呢？简单的来说就是 Webpack 中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。提到前端优化，提取公共代码是必不可少的手段。在 Webpack 出现前，提取公共代码是人为去处理，而 SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码。Webpack创始人的初衷也是希望能有更多时间写更多代码，所以这种纯体力的劳动交给Webpack去完成。
webpack4之SplitChunksPlugin使用指南
08-27
Webpack4 之 SplitChunksPlugin 使用指南 Webpack4 中的 SplitChunksPlugin 是一个非常重要的插件，它可以帮助开发者更好地优化代码的拆分和加载。下面是对 SplitChunksPlugin 的详细介绍。 参数介绍 在使用 ...
webpack4 optimization使用总结
10-16
默认配置会根据 `chunks` 参数（`async`、`all` 或 `initial`）拆分异步、同步或初始化代码。你可以通过 `cacheGroup` 定义自己的拆分规则，例如匹配特定文件并指定 chunk 名称。 `name` 属性定义了拆分后的 js ...
webpack-common-chunks-hbs
06-04
chunks: 'all', // 提取所有类型（initial、async 和 all）的 chunk minSize: 10000, // 设置最小提取大小，单位为字节 minChunks: 2, // 至少被引用两次的模块才会被提取 maxAsyncRequests: 5, // 并行请求的...
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
08-28
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式 在本篇文章中，我们将介绍使用webpack的CommonsChunkPlugin插件来提取公共代码的3种方式。 什么是CommonsChunkPlugin？ CommonsChunkPlugin是webpack的...
webpack4——splitChunks
张勇的博客
12-27 6260
webpack4也已经出来好久了，之前写了一篇CommonsChunksplugin的，但webpack4已经废弃了CommonsChunksplugin，改用了splitChunks；splitChunks在用法上和思想用都有所不同，更加方便，但是总体来说，还是大同小异。 用法 webpack4打包优化直接写在配置项里面，而不是写在插件里面，这是splitChunks的默认配置： module...
webpack4之splitChunks.minChunks
YaoDeBiAn的博客
02-02 1325
概要 这个配置表示split前单个非按需导入的module的并行数的最低下限。 注：只对import或require直接引入的module有效。 分析 简单来讲，假如minChunks设置为n，那么某个module想要被拆分出去，那么它的共享次数（或者说并行请求次数必须 >= n）: 1. minChunks设置为n 2. 假设有m个入口点，这m个入口点都直接引入了某个模块module（通过...
理解webpack4.splitChunks
weixin_30929011的博客
01-24 112
一、前言 　　之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的，现在正好有时间打算好好了解一下，看了官方文档也陆陆续续的看了看网上别人写的文章，感觉大部分都是将官方文档翻译了一遍，很多问题都没有解释清楚，无奈只好自己写demo去通过实际编译结果来理解，经过一天多的不断调试和百度，基本弄清楚了splitChuns的运行规则了，特此记录下来。 二、webpack中的三个概念modu...
一步一步的了解webpack4的splitChunk插件
weixin_34362790的博客
05-30 485
本文大约1500字，看完本文大概需要10分钟，动手尝试需要1小时，如有错误，请指正。 初衷 webpack4出了两个月，发现大家包括我对splitChunk的使用都还是在摸索阶段。我也看了挺多别人的配置demo，都觉得不太满意或者没得到太好的解惑，issue 下面的问题也没什么人回复，只能自己操作了，顺便记录下来，如果大家有更好的，欢迎评论区留下地址。 常用参数 minSize(默认是300...
webpack splitChunks解析
weixin_43294560的博客
08-29 4248
minChunks：模块的重复调用次数大于等于minChunks值时，就会满足这项拆包条件，但只看入口模块导入的，不看动态加载模块中导入的(import(‘…minSize：控制最小包的大小，大于这个值才会去拆分，如果拆分的公共模块小于这个大小，那就复制成多份，直接打包到引用该模块的包里。默认在build的时候，webpack会将lodash和业务逻辑都打包到一个bundle中，这个bundle非常的大。当为initial时，只能分离初始化的模块，异步的模块无法分离。async,表明只能分离异步的模块。..
webpack升级踩坑
weixin_30532369的博客
08-27 365
webpack3.8.1 => webpack4.39.2 1、error：webpack is not a function fix scripts/start.js const compiler = createCompiler(webpack, config, appName, urls, useYarn); => const compiler = createComp...
webpack 4 源码主流程分析（八）：生成 chunk
netox99的博客
03-09 302
处理异步模块的时候，queue 里的 block 为 ImportDependenciesBlock 依赖，然后更新 chunkGroup 后， switch 走 PROCESS_BLOCK 获得本次异步对应的真正模块，后面的处理数据都将在新的 ChunkGroup 信息对象上。解析了所有第一层异步(即非嵌套异步模块)的 module，并为每个不同的异步 mudule 都新建了 chunkGroup 和 chunk 并建立了两者的联系。存于 compilation.chunkGroups。
webpack4之splitChunks.maxInitialRequests
YaoDeBiAn的博客
01-26 806
概要 同maxAsyncRequests配置类似，该配置表示入口点能被拆分的最大数量。 准备工作 目录 root ——dist（打包之后的文件夹） ——node_modules（下载的包） ——src（项目脚本目录） ————entry（入口点脚本） ————modules（入口点中引入的模块） ——package.json（包管理文件） ——webpack.config.js（webpack...
chunk-vendors.600198a2.js:12 ChunkLoadError: Loading chunk chunk-51d55235 failed.
最新发布
06-01
4. 如果你使用的是 webpack 打包工具，尝试运行 `npm run build` 重新构建项目，并确保没有出现任何错误。 5. 如果以上方法都无法解决问题，可以考虑使用其他工具或方法来加载 JavaScript 文件，例如使用 CDN 加载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值