使用动态import()和Intersection Observer实现按需加载，结合路由级代码分割与预加载提示，通过webpack或Vite构建工具优化资源加载时机，减少初始体积、提升首屏性能。
实现JavaScript代码的懒加载与按需加载，核心在于减少初始加载体积、提升页面响应速度。关键策略是将非关键代码延迟到需要时再加载，结合现代浏览器特性与构建工具能力来优化资源加载时机。
使用动态import()实现按需加载
ES2020引入的import()语法支持动态导入模块，返回Promise，可在运行时按条件加载脚本。
- 适合用于路由切换、模态框弹出、用户交互触发的功能模块
- 结合webpack或Vite等打包工具，会自动做代码分割生成独立chunk
- 示例：点击按钮才加载图表库
const loadChart = () => import('./chartModule.js');
button.addEventListener('click', () => {
loadChart().then(module => module.init());
});
监听事件与 Intersection Observer 实现懒加载
控制资源在特定条件下加载，比如元素进入视口或用户滚动到某区域。
- 图片、视频、长列表组件可延迟加载
- 使用IntersectionObserver监听元素是否可见，代替频繁的scroll事件
- 避免阻塞主线程，提升用户体验
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
import('./heavyComponent.js');
observer.unobserve(entry.target);
}
});
});
observer.observe(document.getElementById('section'));
路由级代码分割（适用于单页应用）
在SPA中，不同页面或视图的JS代码不必全部打包进首页。
立即学习“Java免费学习笔记（深入）”；
- React + React.lazy 可配合 Suspense 实现组件级懒加载
- Vue 的异步组件写法：defineAsyncComponent(() => import('./Modal.vue'))
- 框架路由配置中直接使用动态导入
// Vue Router 示例
{ path: '/about', component: () => import('./views/About.vue') }
预加载提示与资源优先级控制
合理利用浏览器预加载机制，在空闲时提前拉取可能用到的资源。
- 使用提示浏览器在空闲时下载模块
- rel="preload"用于高优先级资源，强制提前加载
- 动态插入script标签也可实现细粒度控制
// 动态预加载
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = 'next-page-bundle.js';
document.head.appendChild(link);
基本上就这些。关键是根据业务场景选择合适的加载时机，配合打包工具做代码分割，再通过行为或观察器触发加载。不复杂但容易忽略细节，比如错误处理和加载状态反馈。做好了能显著降低首屏时间。
