以前在使用angular进行开发时，始终没有处理好异步加载的问题，最多只能使用requirejs异步加载controller里面的内容。导致后来项目扩大的时候，性能问题十分蛋疼。最后我竟然把单页面引用拆成了多页面应用，感觉好囧。。。
后来尝试用vue写一个项目，配合则webpack，发现效果相当的好。但是vue的异步组件文档太误导人了，让我尝试了好久才发现怎么用。文档上是这样写的：
Vue.component(‘async-webpack-example‘, function (resolve) {
// 这个特殊的 require 语法告诉 webpack
// 自动将编译后的代码分割成不同的块，
// 这些块将通过 ajax 请求自动下载。
require([‘./my-async-component‘], resolve)
})
这里直接用require是错误的， Webpack 的代码分割功能中对于AMD方式的模块加载其实是用的require.ensure.由于1.x版本还不支持ES6的module，所以想要这里vue不能用ES6写了。
Vue.component(‘asyncUserModal‘, function (resolve, reject) {
require.ensure(["../modal/user-modal.vue"], function (require) {
resolve(require("../modal/user-modal.vue"));
});
});
但是这里还是有一个非常麻烦的问题，那就是我找了很多地方都没有看见动态加入子组件的方法，这会导致父子组件的事件通信无法触发。所以最后我只能把组件作为全局组件。
new Vue({
el: ‘#js-modal-wrap‘,
data: function(){
return {};
} });
这种写法让人十分不爽，不知道有没有知道vue是否提供一种parentComponent.appChildComponent()之类的方法。如果知道，求告知。
上面这种异步组件可以用在我点击登录时，才去加载登录组件，这样就可以减少首屏请求内容过多的问题。
下面还有一种就是在单页面应用中，我们从首页进入其他页面的时候异步加载其他页面内容。这个在vue-router中有类似的方法。
router.map({
‘/‘:{
name:‘home‘,
component:home
},
‘/video/:videoId‘:{
name:‘player‘,
component:function(resolve){
require.ensure([‘./pages/player/player.vue‘], function(){
resolve(require("./pages/player/player.vue"));
});
}
}
}
在我个人看来，vue确实是一种非常不错的框架，目前看来是angular1.x的一种不错的代替方案。当然我也遇到一些奇怪的问题，还不知道是我没找对方法还是BUG，比如在vue-loader中使用less，会导致css的背景图无法加载。还有一个就是使用webpack的问题也挺麻烦的，就是很多第三方库使用闭包的时候都是IIFE,直接使用this代替window以便于在浏览器和nodejs端都能很好的运行。但是打包过后，this直接被webpack打包成undefined了。可能是我英语不好加上没有系统看webpack文档。不知道有没有人遇到这个问题？