Vue3优化之实现懒加载和子组件异步加载
2023-12-13 10:16:17
路由懒加载
因为Vue在打包的时候将所有路由组件一次性打包到一个文件中,会导致初始加载时需要下载较大的文件。而使用路由懒加载,可以将路由组件拆分为多个小文件,只有在需要时才会下载对应的文件,从而降低初始资源负载。按需加载组件的资源,提高资源使用率、提高用户体验。.
原来路由的写法:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
// 其他路由...
];
const router = new VueRouter({
routes
});
export default router;
路由懒加载的写法:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('./views/About.vue')
},
// 其他路由...
];
const router = new VueRouter({
routes
});
export default router;
异步组件
因为vue在加载的时候会先加载完子组件之后,才把父组件给加载了,这样如果子组件加载时间过长,就会导致页面出现长时间的空白,使用异步组件就可以解决这个问题。
vue3提供了?defineAsyncComponent
?,它可以更简洁地定义异步组件。0只需要传递一个返回?import()
?函数的参数,该函数会在需要时动态加载组件。这样可以减少手动编写异步加载的代码。
代码:
import { defineAsyncComponent, Suspense } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'));
export default {
// ...
components: {
AsyncComponent
},
// ...
template: `
<div>
<Suspense>
<AsyncComponent />
</Suspense>
</div>
`
};
这样我们的页面加载就会很快了。
文章来源:https://blog.csdn.net/m0_54409739/article/details/134899449
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!