代码分割是将JavaScript拆分为多个小块按需加载的优化策略。通过动态import()实现功能延迟加载，结合路由进行页面级分割，利用rel="preload"和rel="prefetch"优化资源加载时机，并配合Webpack、Vite等工具配置分割策略，提升HTML5应用的加载速度与用户体验。
HTML5 本身并不直接提供代码分割功能，代码分割更多是构建工具（如 Webpack、Vite、Rollup）在开发基于 HTML5 的应用时实现的优化策略。但通过合理的结构设计和现代前端工程化手段，可以在 HTML5 项目中高效实现代码分割，从而提升页面加载速度与用户体验。
什么是代码分割？
代码分割（Code Splitting）是指将 JavaScript 打包文件拆分成多个较小的块，按需加载而非一次性加载全部资源。虽然 HTML5 不控制打包过程，但它作为承载脚本的容器，配合模块化脚本引入方式，能有效支持分割后的代码运行。
使用动态 import() 实现按需加载
现代浏览器支持 ES Modules，可通过 import() 动态导入模块，触发构建工具自动生成分割点。
- 将不立即需要的功能延迟加载，例如弹窗组件、图表模块
- 语法简洁，原生支持，无需额外配置即可被 Webpack 或 Vite 识别为分割点
示例：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
import('./modal.js').then((module) => {
module.openModal();
});
});
利用路由进行页面级分割（适用于单页应用）
在基于 HTML5 的单页应用中，按路由拆分代码是最常见的优化方式。
- 每个页面对应一个独立的 JS 文件，仅在访问该路由时加载
- 结合 React Router、Vue Router 等框架可轻松实现懒加载组件
Vue 示例：
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');
React + React Loadable 或 Suspense 也能实现类似效果。
预加载与预连接优化资源获取时机
HTML5 提供了 link 标签的 rel="preload" 和 rel="prefetch"，可智能提示浏览器提前加载关键分割块。
- preload：优先加载当前页面即将用到的资源
- prefetch：空闲时预加载未来可能用到的模块（如用户可能跳转的页面）
示例：
立即学习“前端免费学习笔记（深入）”；
合理使用构建工具配置分割策略
Webpack 和 Vite 支持多种代码分割模式，合理配置可自动优化输出。
- SplitChunksPlugin：提取公共依赖（如 lodash、react）到单独文件，避免重复加载
- 设置 minSize 和 maxAsyncRequests 控制分割粒度
- Vite 默认基于 ESM 进行静态分析，天然支持高效分割
基本上就这些。HTML5 虽不直接处理分割逻辑，但其对模块脚本和预加载机制的支持，为现代代码分割提供了良好基础。关键是结合构建工具和浏览器能力，按需加载、减少初始体积。不复杂但容易忽略细节。
