前端笔记

一、Vue项目按需加载

1. 动态组件&异步组件

参考地址

(1) 动态组件

在一个多标签的界面中使用 is 特性来切换不同的组件：

<component v-bind:is="currentTabComponent"></component>

用一个 元素将其动态组件包裹起来，可实现些组件实例能够被在第一次被创建的时候缓存下来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

(2) 异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})