Angular: <link rel="preload"> in index.html 用于生成的 web worker

Question

我有一个包含Web Worker实现（通过生成ng generate webWorker）的 Angular 应用程序。

我想将给定的网络工作者标记为 preloading，如下所示：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <link rel="prefetch" href="worker.js" />
   ...
  </head>
 ....
</html>

问题是worker.js文件的名称是通过 Angular CLI 生成的，例如0.7841408a8c7c04e45900.worker.js（捆绑自worker.ts）

有没有办法将文件名的占位符放入 index.html，在构建时由实际文件名替换？

Answer 1

在 angular.json 文件中，在脚本部分提及工作文件路径。

build: {
    ...,
    options: {
        "scripts": ['./worker.js']
    }
}

默认情况下，Angular 会将脚本数组中提到的文件直接注入到 html 中。如果您不希望注入角度，您可以传递配置对象，如下所示：

"scripts": [
  { 
    "input": "./worker.js", 
    "inject": false, 
    "bundleName": "worker" 
  }
]

在上述情况下，您可以更好地控制捆绑的 js 文件的名称。由于您知道捆绑包的名称，因此可以直接在 html 中将其指定为

<link rel="prefetch" href="worker.js">

希望这可以帮助。

Angular: &lt;link rel="preload"&gt; in index.html 用于生成的 web worker