vue项目依赖文件拆分

需求背景：
在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。
为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？

解决方案：
修改webpack的配置文件externals，从输出的依赖文件中排除某些依赖包，将被排除的依赖包单独引入到html页面中。

示例：

1）webpack配置文件修改

externals: {
  'vue': 'Vue',
  'element-ui': 'ElementUI',
}

2）去除main.js中element-ui的引入

3）html页面中引入vue、element-ui文件

依赖文件拆分前后对比图