html文件必须拆成多个页面，中大型项目若用单个index.html会导致路由刷新、状态丢失、seo差、维护困难；纯静态多页应用（mpa）须按模块拆分并统一管理公共结构与资源路径。
HTML文件该不该拆成多个页面
大多数中大型项目，index.html 一统天下很快会失控——路由跳转变刷新、状态难保持、SEO 和可维护性都打折扣。单页应用（SPA）用 index.html 做壳是合理选择，但前提是 JS 框架（如 React/Vue）接管了视图；纯 HTML 多页项目（MPA）则必须拆，否则连基本的导航复用都靠复制粘贴，改个页头就要改二十个文件。
常见错误现象：Uncaught ReferenceError: $ is not defined 出现在某个子页面但其他页面正常——大概率是部分 HTML 文件漏引了 jquery.js，而你根本没意识到有二十个独立 HTML 在各自管理 script 标签。
- 静态 MPA：按业务模块拆，比如
dashboard.html、settings.html、profile.html - 所有页面共享的结构（页头/页脚/导航）不能硬编码，用服务器端 includes（如 PHP 的
include）、构建工具（如 Eleventy 的 layout）、或至少用 JS 动态加载（fetch()+insertAdjacentHTML） - 避免在每个 HTML 里重复写
<meta name="viewport">或<link rel="stylesheet">——抽到模板层，不是“能跑就行”的事，是后续加 CDN、换主题、做暗色模式的前置条件
如何让 CSS 和 JS 不在 HTML 里“野蛮生长”
一个 index.html 里塞了 5 个 <script></script>、3 个 <link rel="stylesheet">，还混着内联 <style></style> 和 <script></script>，等于把依赖关系全写死在视图层。改个打包输出路径？全手动搜 dist/css/main.css 替换为 assets/css/v2.1.0/main.css。
使用场景：团队协作时，后端只管吐数据，前端要保证所有页面加载顺序一致、资源版本可控、调试时能快速定位来源。
-
<link rel="preload">只用于关键资源（如首屏字体、核心 CSS），别滥用——预加载太多反而拖慢主资源发现 - JS 脚本统一放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
