Vue asynchronous loading

1. What is an asynchronous component?

That is, load, render and cache only when the component needs to be rendered.

2. Why do I need to load components asynchronously?

When the project has more and more functions, it contains more and more sub-components, which causes the page to load and the access speed is too slow, so it is necessary to optimize the performance of page loading.

3. Asynchronous load component method

• You can use lazy loading, that is () => import (address)

• About routing lazy loading: VUE: Realizing routing lazy loading

• Use require

// 全局组件注册
Vue.component('Home, function (resolve) {
    
    
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./Home'], resolve)
})


// 局部组件注册
new Vue({
    
    
  components: {
    
    
    'Home': () => resolve => {
    
     require(['./Home'], resolve) }
  }
})