动态导入（import()）实现路由级代码分割，即路由匹配时才按需加载对应组件，减少首屏体积；它返回Promise、支持变量拼接，被构建工具识别为分割点，配合容错封装和webpackChunkName注释可提升健壮性与可维护性。
在 JS 中，通过 动态导入（import()） 实现前端路由级别的代码分割，核心是：**每个路由对应的组件（或页面模块）不预先加载，而是在路由匹配到时才按需加载**。这能显著减少首屏体积，提升初始加载速度。
使用 import() 替代静态 import
静态 import 会在构建时被 Webpack/Vite 等打包工具提前解析并打包进主包；而 import() 是一个返回 Promise 的函数，支持字符串模板、变量拼接，且会被工具识别为“代码分割点”：
// ❌ 静态导入 → 全部打进 main.js
import Home from './pages/Home.vue';
import About from './pages/About.vue';
<p>// ✅ 动态导入 → Webpack/Vite 自动拆包成独立 chunk
const routes = [
{ path: '/', component: () => import('./pages/Home.vue') },
{ path: '/about', component: () => import('./pages/About.vue') }
];在现代框架中直接生效（无需额外配置）
Vue Router（v4+）、React Router（v6.4+）、Next.js、Nuxt 等主流方案已原生支持动态导入语法，只要写对形式，构建工具会自动处理：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- Vue Router：
component: () => import('@/views/User.vue')→ 生成user.[hash].js - React Router：
element: <suspense fallback="{...}"><user></user></suspense>+const User = React.lazy(() => import('./User')) - Vite 项目中，
import('./mod.ts')默认触发异步 chunk 分离，无需插件
配合懒加载与错误处理更健壮
单纯 import() 可能因网络失败或模块路径错误导致白屏。建议封装一层容错逻辑（尤其在生产环境）：
立即学习“前端免费学习笔记（深入）”；
- 用
try/catch捕获加载失败，降级显示错误页或重试按钮 - 对重复加载做简单缓存（避免快速切换路由反复请求同一 chunk）
- 搭配
webpackChunkName注释可命名 chunk，便于调试和缓存控制：import(/* webpackChunkName: "user-page" */ './User.vue')
验证是否成功分割
运行构建命令（如 vite build 或 webpack --mode=production），查看输出目录：
- 应看到多个
.js文件（如index.[hash].js、user.[hash].js、about.[hash].js） - 打开浏览器 DevTools → Network → 切换路由，观察是否只加载对应 chunk（而非全部）
- Vite 用户可访问
http://localhost:5173/__vite_ping查看 chunk 映射关系（开发模式下）
