vue3 定义异步组件来实现组件的按需加载

2024-04-09 46 阅读1分钟

如果你在父组件中静态地导入了一个子组件，即使子组件在页面上没有被渲染（例如，由于`v-if`条件为`false`），子组件的代码仍会被加载。这是因为静态导入会在模块的初始解析阶段就将子组件的代码包含进来。

实现按需加载（也称为懒加载），可以使用动态导入（`import()`）结合Vue的异步组件功能。这样，子组件只会在首次需要渲染的时候才会被加载

const baseConfig = defineAsyncComponent(() => import('./components/baseConfig.vue'));
const baseConfig = defineAsyncComponent({ 
loader: () => import('./components/baseConfig.vue'), 
loadingComponent: LoadingComponent, // 加载时显示的组件 
errorComponent: ErrorComponent, // 出错时显示的组件 
delay: 200, // 在显示加载组件之前的延迟（以毫秒为单位） 
timeout: 30000 // 如果组件加载时间超过这个值，将显示错误组件（以毫秒为单位）
});