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,
},
},
},
