Vue Asynchronous components and Vue.router asynchronous loading

Previously, when developing with angular, there was always no problem with asynchronous loading, and the contents of the controller could only be loaded asynchronously using REQUIREJS. When the project expanded later, the performance problem was very painful. Finally, I actually put a single page reference into a multi-page application, feel good embarrassed ...

Later try to write a project with Vue, with the webpack, found that the effect is quite good. But Vue's asynchronous component documentation was so misleading that it took me a long time to find out how to use it. This is written on the document:

Vue.component (' Async-webpack-example ', function (resolve) {  //This special require syntax tells Webpack  //automatically splits the compiled code into different blocks,  //These blocks will be downloaded automatically via AJAX requests.  require (['./my-async-component '], resolve)})

It is wrong to use require directly here, the Webpack code segmentation function for AMD mode module loading is actually used require.ensure. Because the 1.x version does not support the ES6 module, it is not possible to use the ES6 to write this.

function (Resolve, Reject) {     require.ensure ([function  (require) {                    Resolve ( Require (".. /modal/user-modal.vue ")      );});

But there is still a very troublesome problem, that is, I find a lot of places do not see the method of dynamically adding subcomponents, which causes the parent-child component of event communication can not be triggered. So finally I can only use the component as a global component.

New Vue ({    ' #js-modal-wrap ',    function() {         return  {};    }      
});

This kind of writing makes people very uncomfortable, do not know whether the Vue provides a kind of parentcomponent.appchildcomponent () method. If you know, ask to be informed.

The above asynchronous component can be used when I click to log in to load the login component, which can reduce the content of the first screen request too much problem.

One of the following is that in a single page application, we load other page content asynchronously from the home page when we enter other pages. This is a similar approach in Vue-router.

Router.map ({  '/': {    name:' Home ',    component:home  },  '/video/: VideoID ': {    name:' Player ',    component:function(resolve) {      Require.ensure ([function() {        resolve (require ("./pages/player/player.vue") );      });    }  }}

In my personal view, Vue is really a very good framework, and it seems to be a good alternative for angular1.x. Of course, I also encountered some strange problems, do not know that I did not find the right method or a bug, such as the use of less in Vue-loader, will cause the CSS background image can not be loaded. Another is the use of webpack problem is also very troublesome, is that many third-party libraries use closures when the time is iife, directly use this instead of window to facilitate the browser and the Nodejs side can be very good run. But after packing, this is webpack packaged into undefined. May be my English is not good plus no system to see Webpack documents. I wonder if anyone has encountered this problem?

Vue Asynchronous components and Vue.router asynchronous loading