如何缩短Angular中styles.scss的修改重编译时间？

• 优化全局样式导入结构
  把SCSS变量、混合宏等基础工具类文件，通过angular.json的stylePreprocessorOptions配置自动引入，无需在styles.scss中手动导入。示例配置：

  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles/variables",
                "src/styles/mixins"
              ]
            }
          }
        }
      }
    }
  }
  

  这样styles.scss只保留真正需要全局生效的样式代码，减少导入文件数量，降低编译依赖链复杂度。

• 启用Angular增量编译与缓存
  在开发模式下开启AOT编译和本地缓存，直接执行命令：

  ng serve --aot --cache
  

  或在angular.json的serve配置中永久开启：

  "serve": {
    "options": {
      "aot": true,
      "cache": true
    }
  }
  

  增量编译会只重新编译修改过的文件，缓存则会复用之前的编译结果，大幅缩短重编译时间。

• 拆分模块化样式
  避免将所有样式都塞进全局styles.scss，把页面/组件专属的样式放到对应模块的组件文件中，或拆分为独立的SCSS文件由对应模块导入。这样修改某模块样式时，不会触发全局样式的全量重编译。

• 排查SCSS编译冗余

  • 检查是否存在循环导入的SCSS文件，循环依赖会导致编译时重复处理文件，大幅增加耗时。
  • 简化复杂的嵌套样式、混合宏逻辑，过度复杂的SCSS语法会拉长编译时间。
  • 关闭dev模式下的SCSS sourceMap（如果不需要），在angular.json的build配置中设置sourceMap: false。

• 升级Angular生态依赖
  旧版本Angular CLI和相关编译工具存在性能瓶颈，升级到最新稳定版（如Angular 16+），新版本对SCSS编译和增量构建做了大量优化。

• 优化自定义Webpack配置
  如果自定义了Webpack配置，确保开启文件系统缓存：

  module.exports = {
    cache: {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename]
      }
    }
  };
  

  同时检查scss-loader的配置，禁用不必要的插件或功能，比如关闭additionalData的重复注入（如果已通过stylePreprocessorOptions配置）。

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