MPA中CSS按需引入的核心是每个页面仅加载自身所需样式，通过HTML入口拆分、禁用全局CSS、Sass @use精确控制、动态link预加载及SSR模板注入实现，并需人工验证无跨页样式泄漏。
多页面应用（MPA）中实现 CSS 按需引入，核心是让每个页面只加载自己真正用到的样式，而不是全站共用一个大 CSS 文件。这能显著减少首屏体积、避免样式污染、提升缓存命中率。关键不在于“能不能”，而在于“谁来控制入口”和“怎么切分才不重复”。
按页面 HTML 入口拆分 CSS
Webpack 和 Vite 都支持为每个 HTML 页面配置独立入口，CSS 会随 JS 入口自动提取为对应 chunk。这是最直接有效的按需方式。
- Webpack 中需在
html-webpack-plugin配置多个实例，每个指定chunks: ['pageA']，并确保splitChunks开启chunks: 'all' - Vite 中通过
build.rollupOptions.input显式声明多个 HTML 入口，如{ pageA: 'src/pages/a.html', pageB: 'src/pages/b.html' } - 必须禁用全局 CSS 注入（如不要在
main.js里import './index.css'），否则它会被打到所有 chunk 里 - 检查最终生成的
pageA.css是否含.page-b-header类——若有，说明某处误引了跨页样式文件
用 @use 精确控制 Sass 导入链
Sass 本身不运行时加载，但它的 @use 是编译期“门控开关”。你导不导入，决定了样式进不进最终产物。
- 绝对不要在通用入口 SCSS 文件里
@use 'bootstrap/scss/bootstrap'—— 它会把整个框架塞进去 - 改为在
pageA.scss中只@use 'bootstrap/scss/buttons'和@use 'src/scss/utils/spacing' - Bootstrap-sass 的
$enable-modals: false不等于删掉 modal 样式，真正有效的是跳过@use 'bootstrap/scss/modal' - 用
grep -r '\.modal' dist/*.css验证产物，别信变量名或注释
动态 <link> 加载 + preload 提示
对 SEO 敏感或首屏需强控制的页面，可手动管理 link 标签，配合 rel="preload" 提升关键样式优先级。
立即学习“前端免费学习笔记（深入）”；
- 在
pageA.html的<head>中写：<link rel="preload" href="/css/pageA.css" as="style" onload="this.rel='stylesheet'"> - 用
onload回调避免 FOUC，同时兼容不支持preload的浏览器（fallback 到普通rel="stylesheet"） - 注意：media 属性仍要加，比如
media="screen and (min-width: 768px)"，否则小屏设备也会下载该 CSS - 服务端渲染（SSR）场景下，需在模板层根据当前路由注入对应 link，不能靠客户端 JS 延迟加载
真正容易被忽略的点是：按需引入不是“技术选了就自动生效”，而是每一步都要人工确认样式是否真的没跨页泄漏。构建产物里的 CSS 文件名带哈希不等于内容没冗余，得打开压缩后文件搜类名验证。
