为什么要使用?
在使用vue-cli构建项目,在默认情况下,执行 npm run build/yarn build会将所有的js打包成一个整体,这样情况下 单页面 第一次加载页面会耗费太多时间,导致页面长时间处于 空白情况。所以通常的写法都是 按需加载,来提高加载速度
此适用于项目比较大的情况下,如果就只有几个页面的情况,建议不适用 异步加载模块的方式,加载模块
异步全局挂载
import {
createApp, defineAsyncComponent } from 'vue'
import component from './Component'
let Vue = createApp(component);
defineAsyncComponent 是3.0 提供的异步挂载全局组件的方案
第一种方式:
import Logo from './components/common/Logo' //引入组件
defineAsyncComponent 是3.0 提供的异步挂载全局组件的方案
let asyncCom = defineAsyncComponent(() => new Promise((resolve, reject) => {
setTimeout(() => {
//计时器
resolve(Logo);