Magic Comments 是构建工具解析的特殊注释，用于精准控制代码分割：可命名 chunk（如 webpackChunkName）、配置预加载（preload/prefetch）、强制内联（eager）或提示导出（webpackExports），不改变 JS 运行行为。
通过 import() 的 Magic Comments（魔法注释），可以向构建工具（如 Webpack、Vite、Rollup）传递分包指令，从而精确控制代码分割（code splitting）的时机、命名、预加载策略等。这不是运行时语法，而是构建工具在解析阶段识别的特殊注释，只影响打包结果，不改变 JavaScript 行为。
指定 chunk 名称（name）
默认情况下，动态导入生成的 chunk 名称由构建工具自动生成（如 234.js），难以维护和调试。使用 webpackChunkName（Webpack）或 name（Vite/Rollup）可显式命名 chunk：
import(/* webpackChunkName: "feature-login" */ './login.js')<br>import(/* @vite-ignore */ /* name: "feature-login" */ './login.js')
效果：生成的文件名为 feature-login.[hash].js，便于定位、缓存分析和 CDN 配置。
控制预加载与预获取（preload / prefetch）
构建工具会根据注释自动注入 或 标签：
-
/* webpackPrefetch: true */→ 低优先级后台加载（空闲时获取，适合可能后续用到的模块） -
/* webpackPreload: true */→ 高优先级提前加载（关键路径中即将用到的模块，如主流程下一步） - Vite 使用
/* @vite-ignore */ /* preload: true */或/* prefetch: true */（需搭配插件支持）
注意：preload 会阻塞当前页面渲染资源的下载，慎用于非关键路径；prefetch 更安全，但不要滥用，避免浪费带宽。
强制内联或排除分包（inline / noParse）
某些场景下你希望跳过分包，直接将模块内容内联进当前 chunk（例如极小的工具函数）：
import(/* webpackMode: "eager" */ './utils.js') // 同步引入语义，但仍走模块解析流程<br>import(/* webpackMode: "lazy-once" */ './shared.js') // 同一注释首次调用才加载，后续复用缓存
Webpack 还支持 /* webpackExports: ["default"] */ 提示仅需某导出，辅助 Tree Shaking；Vite 当前暂不原生支持该类细粒度提示，需依赖 ES 模块静态分析。
多环境差异化分包（结合 webpackEnv 或条件注释）
Magic Comments 本身不执行逻辑，但可配合构建脚本动态注入：
// 构建时根据 process.env.NODE_ENV 注入不同注释<br>const env = process.env.NODE_ENV === 'production' ? 'prod-feature' : 'dev-feature'<br>// 生成：<br>// import(/* webpackChunkName: "prod-feature" */ './module.js')
更稳妥的做法是在配置层统一处理（如 Webpack 的 optimization.splitChunks + 动态 chunkGroups），Magic Comments 专注单点精准干预，而非替代整体分包策略。
