Angular 13资源URL哈希后缀问题及预加载方法咨询

1. 为什么资源文件名会追加哈希值？ #

这是Angular生产构建默认开启的内容哈希缓存优化策略：

• Angular CLI在生产模式（ng build --prod或ng build --configuration production）构建时，会对每个静态资源（图片、字体、样式文件等）计算内容哈希值，将其追加到文件名后
• 作用是解决浏览器静态资源缓存问题：未修改的资源哈希不变，浏览器会长期缓存；资源内容更新时哈希值改变，浏览器会自动加载新文件，避免用户看到旧内容

2. 如何正确预加载带哈希的资源？ #

直接写静态路径会导致预加载的URL和实际渲染的不符，推荐两种方案：

方案一：动态生成预加载链接（推荐，灵活适配构建后的哈希） #

通过Angular的依赖注入动态创建预加载标签，Angular会自动解析带哈希的资源路径：

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    // 预加载背景图
    const imgUrl = this.sanitizer.bypassSecurityTrustResourceUrl('assets/img/home-bg.jpg');
    const imgLink = this.document.createElement('link');
    imgLink.rel = 'preload';
    imgLink.as = 'image';
    imgLink.href = imgUrl;
    this.document.head.appendChild(imgLink);

    // 预加载字体
    const fontUrl = this.sanitizer.bypassSecurityTrustResourceUrl('assets/webfonts/fa-solid-900.woff2');
    const fontLink = this.document.createElement('link');
    fontLink.rel = 'preload';
    fontLink.as = 'font';
    fontLink.href = fontUrl;
    fontLink.type = 'font/woff2';
    fontLink.crossOrigin = 'anonymous';
    this.document.head.appendChild(fontLink);
  }
}

运行时Angular会自动替换为生产环境带哈希的URL，确保预加载的资源和实际使用的一致。

方案二：手动使用构建后的哈希文件名（适合资源固定场景） #

先执行生产构建，在dist目录中找到带哈希的资源文件名，直接写入index.html：

<link rel="preload" as="image" href="home-bg.1c0835203511d0a3.jpg">
<link rel="preload" as="font" href="fa-solid-900.9fe4f614c5426b17.woff2" type="font/woff2" crossorigin="anonymous">

注意：每次资源内容更新后，哈希值会变化，需要手动更新index.html中的文件名，灵活性较差。

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