SplitChunksPlugin 配置参数详解

实际上webpack自带的代码分割底层是使用了SplitChunksPlugin这个插件,

无论是同步代码的代码分割或者是异步代码的代码分割都是需要使用到splitChunksPlugin这个插件

// webpack.config.js
...
splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 0,
    mixChunks: 1, //
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/, //判断引入的模块在不在这个node_modules里面
            priority: -10,
            filename: 'vendors.js'
        },
        default: {
            priority: -20,
            reuseExistingChunk: true,
            filename: 'common.js'
        }
    }
}
  • chunks: 'all'
    async只对异步代码做代码分割。
    initial只对同步代码做代码分割。
    all对同步代码和异步代码做代码分割。
  • minxSize: 30000
    引入【包|模块|库】大于30kb打包的时候才做代码分割。
  • maxSize: 50000
    再对分割处理的代码进行二次分割,假如:有一个首次分割的代码大小是1mb,它会尝试将其拆分成多个以50kb大小的文件。
  • minChunks: 2
    模块引入的数量小于2就不做代码分割
  • maxAsyncRequests: 5
    同时加载的模块数,假如我这个代码分割了非常厉害,引入了10个类库就分割成了10个js代码,一打开网页时候同时要加载10个代码,那就违反了maxAsyncRequests是5的要求,所以webpack在遇到这个参数的时候,在打包前5个类库的时候就帮你做代码分割,如果超过5个它的就不做代码分割。
  • maxInitialRequests: 3
    整个网站首页同时加载的时候,或者说入口文件进行加载的时候,入口文件可能会引入其它的文件或者其它的库,那入口文件引入的库做代码分割也只能只能分割出3个的js文件,超过3个就不会做代码分割。
  • automaticNameDelimiter: '~'
    指的是这个组和文件之间,做文件名连接的时候用这个波浪线来做这个连接符
  • name: true
    打包生成文件起什么名,让cacheGroups配置有效。
    缓存组:
    假如,引入了两个模块分别是jQquery和lodash,我们想把这两个模块打包生成一个vendors.js文件,那么就必须配置cacheGroups, 在打包时遇到引入的模块(如:jQuery)符合vendors配置组时它不着急生成vendors.js文件,它会先放到这个vendors组里缓存着,当它遇到别的模块(如:lodash)也符合vendors配置组时,它也会先缓存着,当最总所有的模块都分析好了之后,把符合vendors配置组的模块打包到一起去,把符合default配置组的模块打包到一起去。
    所以cacheGroups起名叫缓存组它是有它的道理的。
  • priority: -10
    假设:引入jQuery这个模块,它符不符合vendors配置组这个要求,是node_modules下的jQuery它是符合的,vendors那它符不符合default配置组的要求呢?那它也是符合的,因为default里面根本就没有配置test,所以所有的模块都符合default配置组的要求,那这2个配置组都符合,那它到底放在哪个组里面呢,实际上就是根据这个priority的值来判断的,priority的值越大那么它的优先级就越高。
    所以jQuery会被打包到优先级最高的配置组里。
    提示:-10是大于-20的。
  • reuseExistingChunk: true
    如果一个模块被打包过了,那么就忽略这个模块,直接使用之前被打包的这个模块。
    假设:在一个main.js文件中引入了一个a模块和一个b模块,但是a模块里面又引入了b模块,在打包main.js的时候它会打包a模块,和a模块里面所引入的b模块,但是main.js中的b模块它就不会再打包了直接就会复用之前在a模块中打被打包的b模块。
评论
:broken_heart: :confounded: :flushed: :frowning: :grinning: :heart: :kissing_heart: :mask: :pensive: :rage: :relaxed: :scream: :smile: :smirk: :sob: :stuck_out_tongue_closed_eyes: :stuck_out_tongue_winking_eye: :wink: