详解webpack中的optimization.splitChunks

核心概念

Module: 模块，在webpack中一切皆模块，一个模块对应一个文件。
Chunk：代码块，一个Chunk由多个模块组成，用于代码分割和合并。
bundle：输出束，通常一个Chunk对应一个bundle，也就是输出文件。

Chunk

chunk 有两种形式：

• initial(初始化) 是入口起点的 main chunk。
• non-initial 是可以延迟加载的块。也可以说是动态加载（dynamic imports) ，或者叫异步Chunks。

optimization.splitChunks

webpack默认配置：

    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },

chunks

默认值：async 。

这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。

此属性对缓存组生效。

示例

使用默认的配置时，我们在main.js写如下代码：

import { omit } from 'lodash'
const a = { a: 1 }
omit(a)

然后我们执行构建，发现只有一个main.js。按照缓存组cacheGroups的配置，node_modules下的代码应当被分到单独的chunk。之所以没分到，就是因为lodash的引入不是动态引入。
修改main.js:

import('lodash').then()

此时再构建，dist目录下就会多出一个文件（默认以随机数字命名文件名），lodash被分离出来了。

将chunks配置改为all，对所有的模块，执行缓存组的策略，也可以达到以上效果。

这就是该配置的特性。

minSize

生成 chunk 的最小体积（以 bytes 为单位）。默认20000Bytes。
以上面分割lodash为例，如果调整minSize，使其比分割的lodash包大，lodash将不会被分割，而是被并入主包。

持续更新中