splitChunksPlugin配置参数详解

基础知识点

• webpack内部的Code-Splitting(代码分割),实际上是splitChunksPlugin插件来实现
• 默认会对所有的异步加载进行代码分割 import()函数

optimization: {
   
    // splitChunks: {
   
    //     chunks: "all"
    // }
},

• 异步导入第三方模块(或自己业务模块)
  
• 数字0代表代码分割产生的id值,如果我们希望是一个可识别的英文名,在异步加载代码import()函数中可以使用魔法注释的语法
  语法: /webpackChunkName:模块名/
  
• 我们发现魔法注释我们填写的是lodash,为什么打包后生成的文件名是vendors~lodash,多了一个vendors呢?因为受webpack.config.js中optimization的默认配置项的值的影响
• 查看splitChunksPlugin插件配置项=>因为optimization.splitChunks配置选项就是往webpack内部的splitChunksPlugin插件传参,由splitChunksPlugin插件来进项代码分割
  
  
• vendors和default的默认值都改成false(之后详解具体含义),再打包

optimization: {
   
    splitChunks: {
   
        chunks: "all",
        cacheGroups: {
   
            vendors: false, // 默认值改成false
            default: false // 默认值改成false
        }
    }
}

小结

• 异步导入(import()函数)才能使用魔法字符串
• 异步导入(import()函数)使用魔法字符串生效的前提必须cacheGroups中的vendors和default设置为false,即没有缓存组
• cacheGroups只对同步导入模块有约束作用,且同步导入的模块要进行代码分割必须配置相关的缓存组
• 当上面异步导入模块,加了魔法注释 /webpackChunkName:lodash/,
• 同时满足vendors缓存组的检测,所以lodash模块打包到vendors缓存组中vendors~lodash.js
• 当cacheGroups中的vendors和default设置为false,则没有缓存组,直接用魔法注释的命名生成分割后的文件名