Code Splitting

将代码拆分成多个bundle，时webpack提供的比较吸引人的功能。
拆分之后的代码可以按照需求进行动态加载而不需要一次把所有代码都进行加载。
比如，当用户导航都某个路由页面，或者基于用户触发的某个事件后进行加载。
将代码拆分的力度比较细之后，可以按照优先级来进行加载，从而减少用户首次加载的等待时间。

webpack主要支持两种类型的代码拆分。

1.基于缓存及并行加载的资源拆分

Vendor代码拆分

业务代码中会使用到很多第三方的类库，将第三方类库拆分成单独的bundle。
可以在业务代码改变的情况下，不改变拆分的第三方库的bundle，
这样就可以让浏览器对该bundle做缓存，从而避免多次下载。
为了实现这点，需要vendor的文件名的[hash]保证固定，无论业务代码怎么变，[hash]都不改变。更多的内容，参考Code Spliting - Libraries.

CSS拆分

某些场景下可能也希望将style样式从逻辑代码中拆分到独立的bundle。
这样做可以让浏览器对该部分样式更好的做缓存并可以让网页异步加载样式，从而避免FOUC
更多内容参考使用ExtractTextWebpackPlugin拆分css

2.按需求进行代码拆分

将资源进行拆分，需要以配置文件的方式设置拆分的文件。
同样的也可以以代码的形式对代码进行拆分。
这样做可以拆分出颗粒度更细的bundle。比如:可以按照应用程序的路由或每个用户的使用习惯进行拆分。这样可以避免用户加载非必要bundle，从而提升加载的速度。

• Code Splitting - Using import() -ECMAScript写法
• Code Splitting - Using require.ensure - CommonJS的写法