引入scss后构建变慢通常是因为sass编译器需要处理嵌套、变量和混合宏，增加了ast解析和css生成的开销。优化方案包括开启增量编译、使用dart sass替代node sass、配置webpack的cache-loader或hard-source-webpack-plugin缓存编译结果，以及通过splitchunks将css按路由或组件拆分以减少单文件体积。
如何配置Webpack实现SCSS增量编译与缓存
通过配置Webpack的loader选项并启用缓存插件，可以显著减少重复编译的时间。核心做法是在sass-loader中设置`options`以利用文件系统缓存，并在module.rules中确保loader顺序正确，同时结合cache-loader包裹耗时操作。
{
"module": {
"rules": [
{
"test": /\.scss$/,
"use": [
"style-loader",
"css-loader",
"sass-loader" // Dart Sass
]
}
]
},
"cache": {
"type": "filesystem"
}
}
上述配置利用了Webpack 5内置的文件系统缓存。当源文件未修改时，Webpack会直接从磁盘读取之前的编译结果，跳过Sass解析阶段。对于旧版Webpack，可使用`cache-loader`包裹`sass-loader`达到类似效果。实际测试中，首次构建时间可能不变，但后续热更新或重新构建速度可提升30%-50%。
立即学习“前端免费学习笔记（深入）”；
如何通过代码分割优化CSS打包体积
将所有CSS打包进一个巨型文件会导致浏览器解析缓慢且无法并行加载。通过配置`optimization.splitChunks`，可以将公共样式和路由级样式分离。例如，将第三方库样式提取为独立chunk，或将首页与子页面样式分开。
{
"optimization": {
"splitChunks": {
"chunks": "all",
"cacheGroups": {
"vendor": {
"test": /[\/]node_modules[\/]/,
"name": "vendors",
"chunks": "all"
},
"common": {
"minChunks": 2,
"priority": -10,
"reuseExistingChunk": true
}
}
}
}
}
该配置会将`node_modules`中的依赖样式提取到`vendors.css`，并将被多个模块共享的样式提取到`common.css`。这样浏览器可以并行下载这些静态资源，并利用长期缓存策略，避免每次发布都变更所有CSS哈希值。注意，过度拆分可能导致HTTP请求过多，建议保持chunk数量在合理范围内（如3-5个）。
当SCSS文件中存在大量嵌套选择器时性能表现如何
在包含深层嵌套（超过4层）和复杂混合宏的SCSS文件中，Sass编译器的CPU占用率会显著上升。这是因为嵌套结构导致生成的CSS选择器特异性增加，且编译器需要递归计算作用域。实际运行中，若单个SCSS文件嵌套超过10层，编译时间可能从毫秒级增至秒级。
