Single-page applications, such as the vue without application of lazy loading, using webpack files will be unusually large after packaging, enter the home page, the content of the need to load too much, time is too long, will be in the long white first, even if done loading is also conducive to the user experience, while use lazy loading page can be divided, Loading pages when needed can effectively share the load pressure of the home page and reduce the load time of the home page

1. Vue asynchronous components

2. Import of es proposal ()

3. The require of webpack, ensure ()

Vue asynchronous components

Using VUE’s asynchronous component technology, on-demand loading can be achieved

const router = new VueRouter({
  routes: [{path: '/foo'.component:resolve= >(require(["./Foo.vue"],resolve)) }
  ] 
})
Copy the code

Es proposal import()

Const component name =() => import(‘ component path ‘)

const router = new VueRouter({
  routes: [{path: '/foo'.component: () = > import(/* webpackChunkName: "group-foo" */ './Foo.vue')}]})Copy the code

The require of webpack, ensure ()

// r is resolve
const list = r= > require.ensure([], () = > r(require('.. /components/list/list')), 'list');
// This is the official recommendation to write lazy load by module
const router = new Router({
    routes: [{path: '/list/blog'.component: list,
           name: 'blog'}]})Copy the code

Note: UniApp is lazy by default. If you want to speed up the loading, you can delete all js files in the index.html package except chunk-vendor and index after the package is completed