揭开Vue异步组件的神秘大毛巾 是的 就是大毛巾

简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要…

简介

在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue中使用异步组件也很简单:

// AsyncComponent.vue
<template>
  <div>我是异步组件的内容</div>
</template>

<script>
export default {
    name: 'AsyncComponent'
}
</script>
// App.vue
<template>
  <div id="app">
    <AsyncComponent v-if="show"></AsyncComponent>
    <button @click="load">加载</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    AsyncComponent: () => import('./AsyncComponent'),
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    load() {
      this.show = true
    },
  },
}
</script>

我们没有直接引入AsyncComponent组件进行注册,而是使用import()方法来动态的加载,import()是ES2015 Loader 规范 定义的一个方法,webpack内置支持,会把AsyncComponent组件的内容单独打成一个js文件,页面初始不会加载,点击加载按钮后才会去请求,该方法会返回一个promise,接下来,我们从源码角度详细看看这一过程。

通过本文,你可以了解Vue对于异步组件的处理过程以及webpack的资源加载过程。

编译产物

首先我们打个包,生成了三个js文件:

image-20211214194854431.png

第一个文件是我们应用的入口文件,里面包含了main.jsApp.vue的内容,另外还包含了一些webpack注入的方法,第二个文件就是我们的异步组件AsyncComponent的内容,第三个文件是其他一些公共库的内容,比如Vue

然后我们看看App.vue编译后的内容:

image-20211224161447196.png

上图为App组件的选项对象,可以看到异步组件的注册方式,是一个函数。

image-20211224161252075.png

上图是App.vue模板部分编译后的渲染函数,当_vm.showtrue的时候,会执行_c('AsyncComponent'),否则执行_vm._e(),创建一个空的VNode_ccreateElement方法:

vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };

关于作者: qwephp

.

为您推荐