vue异步组件和vue.router异步加载

Posted 2020-06-21

以前在使用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文档。不知道有没有人遇到这个问题？