网站代码层面移除未使用CSS：按页面清理冗余样式的简易方法咨询

下面是两种改造成本极低的可行方案，可根据项目实际情况选择：

方案1：直接引入PurgeCSS做无用样式裁剪 #

这个方案不需要修改现有SCSS的编译流程，改造成本最低：

• 先按原有流程把所有SCSS编译为全量CSS文件
• 引入PurgeCSS工具，配置扫描路径覆盖项目所有页面的模板文件（支持HTML、Vue SFC、React JSX/TSX、后端模板等所有主流模板格式），工具会自动对比CSS选择器和模板中实际用到的类名、id、标签，自动删除未匹配到的选择器
• 针对动态生成的类名（比如JS拼接的icon-${type}类），只需在PurgeCSS的safelist配置项中添加对应保留规则，就能避免误删
• 主流构建工具都有对应的封装插件，比如Webpack的purgecss-webpack-plugin、Vite的vite-plugin-purgecss，只需3-5行配置就能跑通整个流程

方案2：按页面维度拆分SCSS编译规则 #

从根源上避免冗余样式加载，不需要额外引入样式裁剪工具：

• 把现有SCSS拆分为公共样式、页面独有样式两个大类：公共样式包括全局重置规则、通用组件样式、全局工具类，单独编译为common.css，所有页面统一加载
• 每个页面专属的SCSS单独拆分出来，单独编译为页面对应的CSS文件，仅在对应页面引入
• 现在HTTP/2的多路复用特性完全可以覆盖多小文件并行加载的性能损耗，不会比加载单个大全量CSS性能差

注意：如果你的项目存在大量动态插入的DOM（比如前端渲染的异步列表、接口返回内容渲染的弹窗等），优先选择方案2，或者在PurgeCSS的白名单中提前把动态内容用到的样式全部加入保留列表，避免线上出现样式丢失问题。

内容的提问来源于stack exchange，提问作者harsha