通过构建工具与浏览器特性协同，HTML可作为资源调度中心实现性能优化。1. Webpack等工具将JS拆分为chunk并自动注入HTML；2. 动态import()按需加载模块，结合交互或视口触发；3. 利用loading="lazy"、rel="preload"和rel="prefetch"优化资源加载时机；4. 微前端架构下，主应用HTML动态加载子应用资源，实现分治部署。
在现代前端开发中，HTML在线代码分割与按需加载是提升页面性能、减少首屏加载时间的关键手段。虽然HTML本身不具备模块化能力，但通过结合现代构建工具和浏览器特性，可以实现高效的资源组织与加载优化。
1. 利用构建工具实现代码分割
实际项目中，HTML通常作为入口文件引用JavaScript和CSS资源。真正的代码分割由构建工具完成，HTML只是承载加载逻辑的容器。
-
• 使用Webpack、Vite或Rollup等工具，可将JS代码按路由、功能或组件拆分为多个chunk
• 配置
splitChunks自动提取公共代码（如第三方库）
• 构建后生成的HTML会自动注入分割后的资源链接，实现异步加载
2. 动态导入实现按需加载
通过ES Modules的动态import()语法，可在运行时按需加载模块，配合HTML使用更灵活。
-
• 在交互触发时加载对应功能模块，例如点击按钮才加载弹窗逻辑
• 结合
IntersectionObserver，当元素进入视口时再加载相关资源
• 示例：button.addEventListener('click', () => import('./modal.js').then(modal => modal.show()))
3. HTML中的资源预加载与懒加载策略
利用原生HTML属性和Link标签，优化资源加载时机。
立即学习“前端免费学习笔记（深入）”；
-
• 使用
loading="lazy"对图片、iframe实现懒加载
• 添加<link rel="preload">预加载关键资源（如字体、首屏JS）
• 用<link rel="prefetch">预取用户可能访问的下一页资源
• 对非关键CSS使用media="print"或动态插入方式延迟加载
4. 微前端架构下的HTML分治方案
大型应用可采用微前端，将不同模块的HTML与资源独立部署，按需集成。
-
• 主应用HTML只加载核心框架，子应用资源在需要时动态注入
• 通过
import-html-entry等工具解析远程HTML，提取JS/CSS并执行
• 实现团队间独立开发、部署，降低整体耦合度
基本上就这些。关键是把HTML当作资源调度的“指挥中心”，真正的能力靠现代工具链和浏览器API协同实现。不复杂但容易忽略细节。
