webpack 2.0.0 juejin.cn/post/684490…
通过对webpack2.0.0的配置和操作，'摇树’的概念，已经非常清晰了。而即使通过‘摇树’来把未使用的方法或者变量在打包时忽略掉，而为了提升开发效率，项目中通常会引入第三方的类库。最后做打包时会只生成一个JS文件。当项目中业务逻辑代码量庞大时，打包生成的JS文件即使压缩后依然会过大。最终项目上线时导致加载页面时间过长，用户体验会大打折扣。
webpack -code splitting
code splitting 解决了上述问题。weback4已经很方便的提供了code splitting的配置项optimization。
chunks //配置为 all,对所有引用的类库做代码分割。 ⚠️
⚠️ code splitting的概念在webpack外依然存在，和webpack没有任何关系，只是webpack引入了代码分割机制。
⚠️optimization配置的code splitting 代码分割只对同步代码有效。
⚠️异步代码，即使不配置 splictChunks，在webpack中也会生效。webpack会自动分割，比如用ES Module 异步引入的方式。
webpack - split chunks plugin
webpack底层使用了split chunks plugin 这个插件。
webpack官方推荐的split chunks plugin插件配置参数如下：⚠️
⚠️ 在optimization中即使配置splitchunks为一个空对象，webpack还会执行如上图的默认配置。默认配置不支持同步。
chunks //默认为异步引入。all为异步/同步都对代码进行切割。
minsize //大于30kb才切割
minchunks //至少引用过一次才会进行切割
maxAsyncRequesrs //同时加载的类库数量，默认即可。
maxinitialRequests //入口文件加载的类库（首页），默认即可。
automaticNameDelimiter //链接符号
name //cacheGroups自定义名称是否有效。
cacheGroups //缓存组
vendors //vendors缓存组
test //打包文件位置
proority //优先级，vendors -10高于default -20。
reuseExistingChunk // 已经打包的模块忽略，直接使用之前被打包的模块。
⚠️扩展
1.只打包动态引入的类库时，会发现打包后生成的文件名称为下标。修改就需要下载一个动态引入组件的插件。
终端下载 npm install --save-dev @babel/plugin-syntax-dynamic-import；下载动态引入组件的插件。此插件支持魔法注释。
在.babelrc中写入，{ "plugins": ["@babel/plugin-syntax-dynamic-import"] }
使用官方示例，并写入魔法注释：
并且修改缓存组配置参数
2.只打包静态引入类库：
使用filename进行自定义名称。
⚠️以上不能混合使用。
一个项目中，都可能会使用到动态和静态引入，所以以上两种单独配置打包的方式都不适合于工程项目中，但魔法注释的配置可以保留，这样你会发现，不管是打包动态引入的类库还是静态引入的类库，更改的都是链接符后面的名称。这是因为打包静态类库时，类库符合vendors的配置规则，而入口为main.js。打包动态引入的类库时，使用魔法注释，把名称修改为lodash,但也符合vendors的配置规则。
我的配置为chunks:'all' + 魔法注释。其他为默认配置项。
