Vue3如何配置懒加载以优化“Loading chunk”现象？

Vue3可以借助Webpack的动态导入（dynamic imports）功能以及vue-router的异步组件（Async Components）来配置懒加载，这有助于优化"Loading chunk"现象。以下是基本步骤：

1. 安装必要的插件：
- `@vue/babel-preset-app` 或者 `@vue/cli-plugin-babel`（如果使用Vue CLI）：提供对动态导入的支持。
- `vue-router`: 自带了asyncComponent支持。

2. 配置路由：
使用`.lazy()`方法标记需要延迟加载的组件：

   import LazyComponent from './LazyComponent.vue' // 这是实际的懒加载模块

   const lazyRoute = {
     path: '/lazy',
     component: () => import(LazyComponent), // 使用动态导入
     name: 'LazyComponent'
   }
   
   router.addRoutes([lazyRoute]);

3. 在模板中引用异步组件：
当路由匹配时，懒加载组件只会当它们真正被访问时才会开始加载：

   <router-view :component="lazyRoute.component"></router-view>

4. 使用`v-if`或`v-show`控制内容显示，直到组件加载完成：

   <div v-if="$route.meta.isLoaded">
     <LazyComponent></LazyComponent>
   </div>

或者使用`<keep-alive>`包裹异步组件以缓存已加载的内容：

5. 控制loading状态：
可以利用过渡效果、loading图或者自定义指令配合来展示加载过程。