场景：用vuecli3创建项目，然后运行vue ui，打包项目看到这样的结果
看到提示，资源过大，让我们用代码拆分来减少资源，那么该怎么拆分呢？
1.分析包文件
我知道包文件很大，但我不知道为什么这么大。幸运的是，有一个工具webpack-bundle-analyzer 可以分析你的 webpack 数据，并且绘制出一幅可视化的树形图来查看占用空间比。
使用
cnpm install --save-dev webpack-bundle-analyzer
webpack中配置（在vuecli3中对应vue.config.js）
build后看到
2.排除 moment locales
Moment 是处理时间的一个很重的解决方案。它拥有强大的 locales 支持，这是非常好的，但是目前我只是使用它来格式化某些 UTC 日期时间，所有包括所有这些 locales 设置似乎是不必要的
webpack中配置
build后看到
3.使用splitChunks
chunks:
- all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包
- async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。
- initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被打包两次（注意和all区别），用于分离页面首次需要加载的包。
minSize: 文件最小打包体积，单位byte，默认30000
比如说某个项目下有三个入口文件，a.js和b.js和c.js都是100byte，当我们将minSize设置为301,那么webpack就会将他们打包成一个包，不会将他们拆分成为多个包。
maxAsyncRequests 最大异步请求数量，默认5
如果我们设置为1，那么每个入口文件就只会打包成为一个文件
maxInitialRequests 入口点处的最大并行请求数，默认为3
如果我们设置为1，那么每个入口文件就只会打包成为一个文件
automaticNameDelimiter： 连接符
假设我们生成了一个公用文件名字叫vendor，a.js,和b.js都依赖他，并且我们设置的连接符是"~"那么，最终生成的就是 vendor~a~b.js
优先级关系
maxInitialRequest / maxAsyncRequests <maxSize <minSize。
cacheGroups定制分割包的规则
test可以配置正则和写入function作为打包规则。其他属性均可继承splitChunks，这里必须说一下priority，设置包的打包优先级
minChunks 最少引入的次数
webpack中配置
build后看到
4.最后来对比下vue ui中的文件大小，我们看到已经由1个大文件拆分出3个文件
还有一些webpack配置优化，需要深入学习webpack。
