vue 组件 component 在使用中很方便，在做一个后台管理系统时，却使用component 造成js体积庞大问题；

就这个问题，进行了优化，记录如下：

项目描述：

后台管理，公共头部，公共左侧栏目，右侧内容区域；

使用 main.js  将右侧页面全部载入，判断了页面 hash，将右侧对应的 vue 绑定给 rightComponent，页面使用

<rightComponent></rightComponent> 进行载入；

问题：build.js 文件非常大（2M左右）；

解决方法：不在main中去载入右侧页面，有了下面的方案：

增加了动态加载页面（rightContent），入口vue 加载了rightContent，rightContent根据hash动态return 对应的组件；

rightContent 必须载入全部的右侧页面；

问题：build.js 文件变小了，但其它的页面js *.build.js 变得很大（2.5M左右）；优化前一个js文件 2M，优化后多个js文件 2M；

解决方法：肯定是动态载入组件造成的，其实说是动态，但是必须全部import，造成体积庞大；那就回归原始方法，将header和leftMenu组件化；

然后路由直接访问右侧vue页面，每个vue页面增加 header 和 leftMenu，至此js 大小终于得到控制；

总结，vue 组件化后，需要使用组件的页面再import；全部 import 就会造成 js 体积大的问题；

思考：像后台这种页面layout，上边、下边、左边一般都固定，只有中间内容在变幻，有真正能动态载入vue组件的方式就很方便了

文中提到的动态载入vue组件，这种方式需要载入全部的vue组件（https://segmentfault.com/q/1010000007148050）