I. Introduction
When building an application by packaging, the JavaScript package becomes very large, affecting page loading. As shown in the figure, if lazy loading is not used, our business code is in the js file at the beginning of the app. As the business increases, the amount of code becomes more and more, and the js file becomes larger and larger. The user visits the page for the first time There may be a brief white screen.
The role of the three js files:
- .js file at the beginning of app : business code written by yourself
- The .js file at the beginning of the manifest : provide the underlying support for the packaged code. For example, we use ES6 or CommonJS export rules in the project, and this js file can process these rules.
- .js files starting with vendor : third-party js code, such as vue, vue-router code
- The index.html file introduces the .js file at the beginning of the app
Two, use routing lazy loading
If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed , it will be more efficient. The main function of routing lazy loading is to package the components corresponding to the routing into js code blocks . Routing lazy loading | Vue Router official website
Lazy loading method:
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
