Menu
I have a Angular app containing a web worker implementation (generated via ng generate webWorker).
I want to mark the given web-worker for preloading, like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="prefetch" href="worker.js" />
...
</head>
....
</html>
The problem is that the name of the worker.js file is generated via Angular CLI, e.g. 0.7841408a8c7c04e45900.worker.js (bundled from worker.ts)
Is there a way to put a placeholder of the filename into the index.html, which is replaced by the actual filename at build time?
657
The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head> , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
The rel="preload" attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as attribute may also need to be included along with rel="preload" .
Currently, you load CSS and JS through the link tag. So, to preload those resources, all you need is to change the rel attribute to preload and add the as=”style” attribute (or as=”script” for JavaScript).
In angular.json file, mention the worker file path in the scripts section.
build: {
...,
options: {
"scripts": ['./worker.js']
}
}
By default, Angular will inject the files mentioned in the scripts array directly into the html. If you do not want the angular to inject you can pass the configuration object as below:
"scripts": [
{
"input": "./worker.js",
"inject": false,
"bundleName": "worker"
}
]
In the above case, you can have more control over the name of the bundled js file. Since you know the name of the bundle, you can directly specify it in your html as
<link rel="prefetch" href="worker.js">
Hope this helps.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
