Angular10生产构建生成超长文件名 保留缓存哈希前提下如何缩短

Angular生产构建生成的长文件名是懒加载公共chunk的默认命名规则导致，由多个关联模块名拼接生成，可通过以下两种方案调整命名规则，同时保留哈希后缀用于缓存清理：

方案1：修改angular.json原生配置（优先推荐，无需额外依赖） #

Angular 10 原生支持调整chunk命名逻辑，操作步骤如下：

• 打开项目根目录angular.json文件，定位到projects > 你的项目名 > architect > build > configurations > production节点
• 将namedChunks参数设置为false，同时保留outputHashing: "all"确保哈希后缀正常生成
• 配置参考：

"production": {
  "optimization": true,
  "outputHashing": "all",
  "namedChunks": false,
  // 其余原有生产配置保持不变
}

• 修改后重新执行ng build --prod即可，生成的chunk文件名将变为类似1.a0c2aafc27b60aa57fc0.js的短格式，哈希后缀完整保留。

方案2：自定义webpack配置（适合需要灵活调整命名规则的场景） #

如果需要更自定义的命名规则，可通过扩展webpack配置实现：

• 安装依赖：npm install @angular-builders/custom-webpack @angular-builders/dev-server -D
• 修改angular.json中build对应的builder，将默认的@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser
• 项目根目录新建custom-webpack.config.js，添加如下配置：

module.exports = {
  output: {
    chunkFilename: '[id].[contenthash].js',
    cssChunkFilename: '[id].[contenthash].css'
  }
}

• 该配置直接指定chunk使用数字ID+内容哈希命名，完全规避模块名拼接导致的长文件名问题。

注意事项 #

• 两种方案均不会破坏缓存清理能力，哈希后缀生成逻辑完全保留
• 方案1改动最小，无需调整现有构建流程，适合绝大多数业务场景

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