按需异步加载是提升spa性能最直接有效的手段，通过路由级动态导入、操作触发式加载、条件性加载及脚本精准加载策略，显著压缩首屏体积、缩短白屏时间、降低内存压力。
按需异步加载是提升大型单页应用（SPA）性能最直接有效的手段之一。它不追求“全量提前加载”，而是让代码在真正需要时才下载、解析和执行，从而显著压缩首屏体积、缩短白屏时间、降低内存压力。
路由级动态导入：拆分核心业务模块
把不同路由对应的组件或页面逻辑，用 dynamic import() 包裹，交由构建工具（如 Vite 或 Webpack）自动打成独立 chunk：
- Vue Router 中写法：
component: () => import('./views/Dashboard.vue') - React Router 中配合
React.lazy：const About = React.lazy(() => import('./About')) - 每个路由只加载自身所需代码，用户首次访问 /login 时，完全不会下载 /admin 下的任何 JS
操作触发式加载：延迟非首屏功能
把用户交互后才需启用的功能模块，推迟到事件发生时再加载：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 点击“导出 Excel”按钮后，再加载
xlsx库和导出逻辑：import('xlsx').then(xlsx => xlsx.write(...)) - 打开富文本编辑器模态框时，才加载
quill或tinymce模块 - 避免将几十 KB 的编辑器代码塞进首屏包，尤其当 95% 用户从不点开它
条件性加载：适配环境或权限
某些模块仅在特定浏览器、设备或用户角色下才有效，可运行时判断后加载：
- 仅在 Safari 中加载 WebKit 专属 API 封装：
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) { import('./safari-polyfill.js') } - 管理员后台菜单项展开时，才加载对应权限校验与管理组件
- 注意：路径不能含未限定变量（如
import(`./${env}.js`)），否则构建工具会打包所有匹配文件
脚本加载策略精准匹配：async 与 defer 各司其职
静态引入的第三方脚本也要分类管理，避免执行时机错乱：
-
统计/埋点类脚本（如 GA、神策）：用
async—— 不依赖 DOM、彼此无顺序要求、越早上报越好 -
主应用入口（如 main.js、app.ts）：用
defer—— 确保 DOM 解析完成后再执行，避免document.getElementById is null - 切忌混用
async和defer：浏览器只认async，defer被静默忽略，导致执行时机失控
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
