optimization.splitChunks 是基于 SplitChunksPlugin 插件实现的
    默认情况下，它只会影响到按需加载的 chunks，因为修改 initial chunks 会影响到项目的 HTML 文件中的脚本标签。

    webpack 默认配置介绍

    1. module.exports = {
    2.   //...
    3.   optimization: {
    4.     splitChunks: {
    5.       chunks: 'async', // 有效值为 `all`，`async` 和 `initial`
    6.       minSize: 20000, // 生成 chunk 的最小体积（≈ 20kb)
    7.       minRemainingSize: 0, // 确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块
    8.       minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。
    9.       maxAsyncRequests: 30, // 最大的按需(异步)加载次数
    10.       maxInitialRequests: 30, // 打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件）
    11.       enforceSizeThreshold: 50000,
    12.       cacheGroups: { // 配置提取模块的方案
    13.         defaultVendors: {
    14.           test: /[\/]node_modules[\/]/,
    15.           priority: -10,
    16.           reuseExistingChunk: true,
    17.         },
    18.         default: {
    19.           minChunks: 2,
    20.           priority: -20,
    21.           reuseExistingChunk: true,
    22.         },
    23.       },
    24.     },
    25.   },
    26. };

    项目中使用

    1. const config = {
    2.   //...
    3.   optimization: {
    4.     splitChunks: {
    5.       cacheGroups: { // 配置提取模块的方案
    6.         default: false,
    7.         styles: {
    8.             name: 'styles',
    9.             test: /\.(s?css|less|sass)$/,
    10.             chunks: 'all',
    11.             enforce: true,
    12.             priority: 10,
    13.           },
    14.           common: {
    15.             name: 'chunk-common',
    16.             chunks: 'all',
    17.             minChunks: 2,
    18.             maxInitialRequests: 5,
    19.             minSize: 0,
    20.             priority: 1,
    21.             enforce: true,
    22.             reuseExistingChunk: true,
    23.           },
    24.           vendors: {
    25.             name: 'chunk-vendors',
    26.             test: /[\\/]node_modules[\\/]/,
    27.             chunks: 'all',
    28.             priority: 2,
    29.             enforce: true,
    30.             reuseExistingChunk: true,
    31.           },
    32.          // ... 根据不同项目再细化拆分内容
    33.       },
    34.     },
    35.   },
    36. }