Astro是否支持类似Next.js的Dynamic Imports动态导入功能？

Astro确实提供了类似Next.js Dynamic Imports的动态导入能力，下面是几种常见的实现方式：

• 组件级动态导入：
  可以通过defineAsyncComponent配合import()语法来异步加载组件，目标组件会被单独打包，仅在需要时加载。示例代码：

  ---
  import { defineAsyncComponent } from 'astro:components';
  const HeavyComponent = defineAsyncComponent(() => import('../components/HeavyComponent.astro'));
  ---
  
  <HeavyComponent />
  

• 客户端脚本动态导入：
  在客户端JavaScript中，直接使用原生import()语法即可实现模块的动态加载，Astro会自动处理代码拆分与打包。示例：

  // 绑定点击事件触发动态加载
  document.querySelector('#load-module').addEventListener('click', async () => {
    const utils = await import('./utils.js');
    utils.initFeature();
  });
  

• 条件式动态导入：
  可以根据路由、用户交互等条件，决定是否加载特定组件或模块，实现按需加载。示例：

  ---
  import { defineAsyncComponent } from 'astro:components';
  let DashboardComponent;
  // 根据当前路由判断是否加载仪表盘组件
  if (Astro.url.pathname === '/dashboard') {
    DashboardComponent = defineAsyncComponent(() => import('../components/Dashboard.astro'));
  }
  ---
  
  {DashboardComponent && <DashboardComponent />}
  

内容的提问来源于stack exchange，提问作者ThomasReggi