Angular-CLI生产构建中CSS类名动态短编码优化方案咨询

嘿，我之前刚好折腾过类似的需求，Angular CLI默认的构建优化确实没包含类名短编码这个功能，但通过扩展它的Webpack配置完全可以实现，结合你提到的css-loader就行，给你梳理两个靠谱的方案：

方案一：用@angular-builders/custom-webpack扩展Webpack配置 #

这是Angular官方推荐的自定义Webpack配置的方式，步骤很清晰：

1. 安装依赖

npm install @angular-builders/custom-webpack css-loader --save-dev

2. 在项目根目录创建custom-webpack.config.js，配置css-loader的类名压缩规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
                localIdentName: '[hash:base64:5]' // 生成5位的短哈希类名，长度可自行调整
              }
            }
          }
        ],
        exclude: /node_modules/ // 排除第三方库，避免样式冲突
      }
    ]
  }
};

3. 修改angular.json里的构建配置，替换默认的builder：
   找到projects -> [你的项目名] -> architect -> build，把builder改成@angular-builders/custom-webpack:browser，并添加customWebpackConfig配置：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./custom-webpack.config.js"
    },
    // 保留你原有的其他构建配置...
  }
}

方案二：用ngx-build-plus快速扩展Webpack #

如果你觉得上面的步骤有点繁琐，ngx-build-plus提供了更简洁的方式：

1. 安装依赖

npm install ngx-build-plus css-loader --save-dev

2. 修改angular.json的builder为ngx-build-plus:browser：

"build": {
  "builder": "ngx-build-plus:browser",
  "options": {
    // 保留你原有的其他构建配置...
  }
}

3. 创建webpack.extra.js，内容和方案一的custom-webpack.config.js一致，然后构建时指定这个文件：

ng build --prod --extra-webpack-config webpack.extra.js

关键注意事项 #

• 如果你用了Angular的组件样式封装（ViewEncapsulation），默认的Emulated模式会生成属性选择器（比如[_ngcontent-xxx]），可能和css-loader的modules规则冲突。可以把组件的encapsulation设置为ViewEncapsulation.None，或者调整css-loader的配置来兼容。
• 测试时记得检查dist目录下的CSS文件和HTML文件，确认类名已经被替换成短哈希编码。
• 如果需要处理SCSS/SASS文件，只要把test: /\.css$/改成test: /\.s[ac]ss$/，并在use数组末尾添加sass-loader即可。

希望这些方案能帮到你，要是遇到配置冲突或者样式失效的问题，可以优先检查Webpack规则的优先级，或者看看是不是和Angular原生的样式处理逻辑冲突了～

内容的提问来源于stack exchange，提问作者ashfaq.p