vue router 路由组件必须用 () => import() 语法实现懒加载，静态 import 会将其打入主 chunk；vue router 4 仅识别函数式动态导入，否则导致白屏、报错或打包分析显示组件未分离。
Vue Router 路由组件必须用 () => import() 语法
直接 import 会把组件打包进主 chunk，失去按需意义。Vue Router 4（Vue 3）只认函数式动态导入，写成 import('./Home.vue') 会被当作静态引用，Webpack 不会切分。
常见错误现象：路由跳转后白屏、控制台报 TypeError: Cannot read properties of undefined、打包分析里 Home.vue 出现在 app.js 中。
- 正确写法：
const Home = () => import('@/views/Home.vue'); - 可加 Webpack 魔法注释命名 chunk：
const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'); - 如果项目用 Vite，注释改用
/* ?v=1.0.0 */或直接忽略——Vite 原生支持import()，无需额外配置
WebStorm 不会自动识别 import() 的类型提示，要配 TypeScript 支持
单纯写 () => import() 后，defineProps、ref 补全变慢或失效，不是代码问题，是 TS 语言服务没拿到组件的完整类型上下文。
关键动作：进 Settings → Languages & Frameworks → TypeScript，把 Use TypeScript Version 改为 Project default (node_modules/typescript)，确保和项目 package.json 里 typescript 版本一致。
- 禁用
Settings → Editor → General → Code Folding → TypeScript：折叠逻辑会触发冗余类型检查，拖慢响应 - 验证是否生效：打开一个懒加载的 .vue 文件，敲
ref看是否秒出类型建议；若仍卡顿，查日志里有没有ts.ls.compiler.heap.size相关 OOM 提示
WebStorm 索引干扰会导致按需加载“失效感”
所谓“失效感”是指：明明写了 () => import()，但启动还是慢、跳转仍卡、甚至热更新失败——根源常是 IDE 在后台反复扫描 node_modules 或残留库路径，让 TS 语言服务持续 GC，无法稳定提供类型推导。
必须清理三处索引寄生源：
- 右键
node_modules→Mark Directory as → Excluded，确认图标变为灰色文件夹（仅顶层变灰 ≠ 生效） - 进
Settings → Languages & Frameworks → JavaScript → Libraries，删掉所有手动添加的node_modules路径（尤其 pnpm/yarn pnp 项目极易误加） - 进
Settings → Indexing，取消勾选Index all files in the project，只留Enable indexing of files opened in editor only
webstorm.vmoptions 里缺 -Dts.ls.compiler.heap.size 就等于没做按需
按需加载的本质是减少主包体积，但若 TS 类型服务因内存不足频繁降级，补全延迟、defineProps 推导失败、emits 类型丢失，开发体验反而比全量加载还差。
这个参数不和 -Xmx 混用——它是给 TypeScript 语言服务器进程单独分配的堆内存，和 WebStorm 主 JVM 无关。
- 最低安全值：
-Dts.ls.compiler.heap.size=4096m（4GB），低于此值类型服务大概率退化为“字符串匹配” - 配套必须加：
-XX:ReservedCodeCacheSize=2048m，否则 TS 编译缓存溢出，.vue文件里 Composition API 的类型提示会随机消失 - 改完必须完全退出 WebStorm（Mac 是
WebStorm → Quit WebStorm），再重开，否则参数不加载
实际项目里，最常被忽略的是「TS 语言服务内存」和「node_modules 库路径残留」这两点。它们不会导致构建失败，但会让按需加载带来的性能收益在开发阶段全部归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
