webpack4 SplitChunks代码分割解析

webpack4的默认的打包机制

在默认配置下，webpack 4 就智能的帮你做了代码分包。入口文件依赖的文件都被打包进了main.js；此外：
1.那些大于 30kb 的第三方包，如：echarts、xlsx、dropzone等都被单独打包成了一个个独立 bundle；

使用import.then()、require.ensure()打包的模块，会单独打包称chunk；

打包的策略：

新的chunk是否被高频率共享或者都来自某个模块；
新的chunk打包前的体积是否大于30kb；
按需加载 chunk 的并发请求数量小于等于 5 个；
页面初始化并发的请求包数量小于3个；

webpack4默认打包的缺陷

不同模块可能引用了相同的模块代码，造成重复打包；

基于当前场景打包 SplitChunks

基础类库：react，react-redux，react-router
UI库：antd，antd-icons
公共组件库：自定义的公共组件
低频组件：echart
业务代码访问层级比较深入的页面按共性打包

splitChunks: {
     chunks: 'async',
      minSize:  40000,
      maxAsyncRequests: 5, // 最大异步请求数
      maxInitialRequests: 4, // 页面初始化最大异步请求数
      automaticNameDelimiter: '~', // 解决命名冲突
      // name: true值将会自动根据切割之前的代码块和缓存组键值(key)自动分配命名,否则就需要传入一个String或者function.
      name: true,
      cacheGroups: {
       baseCommon: {
          name: 'baseCommon',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|react-router|redux-saga|dva|react-router-dom|draft-js\/lib|core-js|moment|@antv\/data-set\/build|)[\\/]/,
          priority: -10,
        },
       UI: {
          name: 'UI',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](@ant-design|antd|immutable\/dist|rc-calendar\/es|braft-finder\/dist|lodash|rc-tree\/es)[\\/]/,
          priority: -11,
        },
       someUsed: {
          name: 'someUsed',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](bizcharts\/umd|echarts|react-color\/lib|zrender\/lib|braft-editor\/dist|rc-table|react-amap\/lib|rc-menu\/es|rc-select\/es|rc-trigger\/es)[\\/]/,
          priority: -12,
        },
      },
    },