首屏加载优化的关键是减少初始js体积，主要通过代码分割实现：路由和组件级动态import、提取公共依赖为shared chunk、预加载高概率使用资源，并用devtools和分析工具验证效果。
首屏加载优化的关键之一是减少初始 JavaScript 体积，而代码分割（Code Splitting）是最直接有效的手段。核心思路是：只在首屏需要时加载首屏所需的代码，把非关键逻辑（如路由后页面、弹窗组件、图表库等）延迟加载。
用动态 import() 拆分路由和组件
这是最常用也最推荐的方式。它让 Webpack 或 Vite 自动创建独立 chunk，并按需加载。
- 路由级拆分：在 React Router 中用 lazy + Suspense
- 组件级拆分：对大型 UI 组件（如富文本编辑器、地图模块）单独 import
- 避免在顶层写
import xxx from './HeavyModule'，改用const HeavyModule = await import('./HeavyModule')或配合React.lazy
提取公共依赖到单独 chunk
第三方库（如 lodash、moment、axios）如果被多个入口或异步模块引用，应抽成 shared chunk，避免重复打包。
- Webpack 中配置 splitChunks.chunks: 'all' 和 cacheGroups
- Vite 中默认启用，可通过 build.rollupOptions.output.manualChunks 精细控制
- 注意：像 React、ReactDOM 这类基础库建议单独提取，但不要过度拆分（比如把每个 lodash 函数都拆一个文件）
预加载关键异步资源
动态 import 默认是“懒加载”，但首屏可能马上要用的资源（比如点击登录按钮后立刻渲染的表单），可以提前 hint 浏览器预加载。
- 用 import('xxx').then(...) 后加
import('xxx').then(...)不够快，可搭配import(/* webpackPrefetch: true */ './LoginModal') - Vite 中支持
/* @vite-ignore */注释或使用import.meta.preload - 慎用 prefetch：只对用户高概率触发的模块用，否则会增加无谓带宽消耗
检查实际加载效果
拆完不验证等于没拆。必须通过工具确认是否生效。
- 打开 Chrome DevTools → Network → 刷新页面，过滤 JS，看主 bundle 是否明显变小
- 查看 Sources 面板，确认有多个 chunk 文件（如
123.abc.js、vendor.efg.js） - 用 webpack-bundle-analyzer 或 vite-plugin-visualizer 查看模块组成，定位未拆分的大依赖
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
