vue的异步组件

最新推荐文章于 2025-07-06 09:28:04 发布

原创最新推荐文章于 2025-07-06 09:28:04 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue项目中利用异步组件优化加载性能。通过将非核心组件延迟加载，可以显著减少初次加载时间。文章详细解释了使用工厂函数定义异步组件的方法，并结合webpack的代码分割功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vue做单页应用或大型的网站时，随着功能的增多，组件文件也会随着增加，如果在第一次运行应用时，就加载所有的组件，就会造成性能影响，导致打开时间很长。

在实际开发中，一个应用都是多个小组件组成的，对于一些非核心组件，不是立刻就需要加载的内容，就可以使用异步组件。

vue允许使用一个工厂函数定义组件，这个工厂函数会异步解析组件。只有在这个组件被渲染的时候，才会触发这个工厂函数

，且会把结果缓存起来供之后渲染。

这个是项目结构：

我们演示在index.vue中定义异步组件，异步加载later.vue和later2.vue

先试着定义异步组件，不是传入一个对象，而是一个函数

Vue.component('example', function(resolve, reject) {
    setTimeout(function() {
        resolve({
            template: `<div>Example Async Component</div>`
            })
        }, 3000)
})

函数有2个参数，resolve和reject，它们是两个函数，由javascript引擎提供，不用自己定义。resolve会在你从服务器得到组件定义的时候被调用。

结合异步组件和webpack的代码分离（动态导入），定义later.vue异步组件

Vue.component('later', function(resolve) {
    require(['./later.vue'], resolve)
})

这里使用的是webpack模块方法require(AMD版本)，将其对应的文件拆分到一个单独的 bundle 中，此 bundle 会被异步加载，然后调用resolve回调函数

也可以在工厂函数中返回一个 Promise，这么写

Vue.component('later', () => import(/*webpackChunkName:"later"*/'./later.vue'))

这里使用的webpack模块方法import()，可以通过注释的方法定义新chunk的名称

当使用局部注册的时候，也可以直接提供一个返回promise的函数，比如在使用vue的路由懒加载时：

这样只有当要访问路由时，才会加载指定路由下的组件