import() 是返回 promise 的动态导入函数，支持运行时按需加载和代码分割；而 static import 是顶层静态声明，编译期即打包进主 chunk。
什么是 import() 动态导入？它和 import 静态声明有什么本质区别？
import() 是一个返回 Promise 的函数，用于在运行时按需加载模块；而 import 语句必须写在模块顶层，是编译期静态分析的依赖，会被 Webpack/Vite 等打包工具提前收集并打包进初始 chunk。
关键区别在于：只有 import() 能触发真正的代码分割，让模块不进入主包，也不参与首屏加载。
- 静态
import：哪怕只用了一行import { utils } from './utils.js'，整个utils.js就会打进main.js - 动态
import()：写成const { utils } = await import('./utils.js')，打包工具会自动把它抽成独立 chunk（如789.js），仅当执行到这行才发起请求 - 不能在
if外层或函数参数里写import()—— Vite/Webpack 要求路径必须是“可静态分析的字符串”，比如import(`./pages/${page}.js`)可以，但import(`./pages/${getModule()}.js`)会报错
React 中用 React.lazy() + Suspense 懒加载组件，为什么有时不生效？
React.lazy() 底层就是封装了 import()，但它有硬性限制：只支持默认导出（export default），且必须配合 <suspense fallback></suspense> 使用。漏掉任意一点，懒加载就退化成同步加载。
常见失效场景：
立即学习“Java免费学习笔记（深入）”；
- 目标模块用了命名导出（
export const Page = () => {...}），没写export default Page→ 报错lazy function must resolve a component - 组件被直接渲染，没包在
<suspense></suspense>里 → React 会立刻同步执行import()，失去懒加载意义 - 在服务端渲染（SSR）中使用
React.lazy()→ 不支持，会抛错，得改用loadable-components或手动判断typeof window !== 'undefined'
const Dashboard = React.lazy(() => import('./Dashboard'));
// ✅ 正确：default export + Suspense 包裹
function App() {
return (
<Suspense fallback=<p>Loading...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1495" title="Img.Upscaler"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680403854636.jpg" alt="Img.Upscaler" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1495" title="Img.Upscaler">Img.Upscaler</a>
<p>免费的AI图片放大工具</p>
</div>
<a href="/ai/1495" title="Img.Upscaler" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>>
<Dashboard />
</Suspense>
);
}Webpack 的 /* webpackChunkName: "xxx" */ 注释有什么实际作用？
这个魔法注释不是装饰，而是明确告诉 Webpack：“把这个动态导入生成的 chunk，命名为 xxx”，否则它会用数字 ID（如 123.js），不利于调试、缓存和 CDN 配置。
更关键的是：同名 chunk 会被合并。比如多个地方都写了 /* webpackChunkName: "vendor" */ import('lodash')，最终只会生成一个 vendor.js，而不是重复打包多份 lodash。
- 命名中支持变量插值：
/* webpackChunkName: "pages-[request]" */会让import(`./pages/${name}.js`)生成pages-home.js、pages-about.js等可读文件名 - Vite 用户注意：Vite 默认不识别该注释，要用
build.rollupOptions.output.manualChunks或dynamicImportVars插件替代 - chunk 名称会出现在 Network 面板和构建产物中，命名太泛（如全叫
common）会导致不同业务逻辑挤进同一个 chunk，反而增大单个请求体积
路由级懒加载后，为什么首屏白屏时间没变短？
懒加载 ≠ 自动优化首屏性能。如果懒加载的模块本身依赖大量其他模块（比如某个页面组件内部又 import 了 5 个大图表库），这些依赖仍会被打到该页面 chunk 里，导致 chunk 体积暴涨，HTTP 请求耗时反而更长。
真正起效的前提是：被懒加载的模块足够“轻”，且它的依赖树也被合理拆分。
- 检查打包分析报告（Webpack Bundle Analyzer 或 Vite Plugin Visualizer）→ 确认该 chunk 是否真的小（建议 ≤ 100KB gzipped）
- 避免在懒加载模块里再同步
import全量 UI 库（如import ElementPlus from 'element-plus'），应改用按需导入或异步加载子组件 - 服务端要开启 HTTP/2 或 HTTP/3，否则多个小 chunk 并发请求可能被阻塞；CDN 需配置缓存策略，否则每次都是回源
最常被忽略的一点：懒加载只是把下载时机延后，但首次交互（如点击跳转）仍需等待 JS 下载 + 解析 + 执行，这部分延迟无法靠懒加载消除 —— 如果用户刚打开首页就猛点导航栏，体验上仍是“卡一下”。
