Vue中import为什么可以异步加载示例详解

// 静态 import —— 同步解析，必须放在文件顶部
import MyComp from './MyComp.vue'

// 动态 import() —— 返回 Promise，可以按需调用
button.onclick = async () => {
  const module = await import('./HeavyLib.js')
  module.doSomething()
}

// Vue 3 定义异步组件
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => import('./HeavyComp.vue'))

// 或者直接在 components 中使用
export default {
  components: {
    AsyncComp: () => import('./HeavyComp.vue')  // 简写
  }
}

用户访问页面
    │
    ▼
Vue 初始化，遇到 async component
    │
    ▼
先渲染 loading/suspense 占位  （不阻塞页面）
    │
    ▼
组件需要渲染时 → 触发 import()
    │
    ▼
网络异步加载 chunk ── 同时页面其他部分正常工作
    │
    ▼
chunk 下载完成 → Promise resolve
    │
    ▼
替换占位，渲染真实组件

// webpack 魔法注释（控制分包行为）
const About = () => import(/* webpackChunkName: "about" */ './About.vue')

// Vite 中直接使用即可，自动分包
const About = () => import('./About.vue')

dist/
  ├── index.html
  ├── assets/
  │   ├── index-abc123.js      ← 主包
  │   ├── about-def456.js      ← 异步 chunk，首次不加载
  │   └── ...