Asynchronous components:
What is asynchronous it?
Is our route, if in very many cases, if a one-time code by webpack all packed into it, it will lead to our js files become very large.
So when the initial load, the time will be very long.
And, when we visit the corresponding page, the other pages of our js code also came fully loaded, this is obviously a more wasteful behavior.
That this time, if we can correspond to different routing, load only the code corresponding to this part of our entire core code.
The code corresponding to the page, the next time we went to go visit a real load, then this time, our application will not do a little better?
So how to do it? We can vue-router with webpack, it can be very convenient to use asynchronous behavior of a component.
Method One: import
Method two: resolve
First, we enter a default route localhost: 8080.
Due to redirect hello, Hello component but we set / hello /: id, so it can not match, so I can not load and displays.
Then we can see, he only loaded app.js
When we click hello 123, this is 1.js Hello components.
When we click login, and loaded the Login component.
This is an asynchronous routing configuration, and quite simply, we do not use up what code needs to be updated.
It gives us the benefits of very many, it is to let us in when first loading screen, faster speed will become.
