Check for unused CSS JS JPG SVG JPEG, PNG, WOFF, TTF... files
We expect that visitors will access the page using only .html files and not hotlink to other assets.
So any other files that are not .html extension should be referenced from our .html files (either an absolute or relative link).
If there is any assets which we are not referencing then that should be reported as an error.
Any solution we make will need to look at the compiled site. It will need to understand absolute and relative paths.
And we may possible need a configurable way to hardcode in some specific files. Such as if we have an HTML that uses some JavaScript to decide which image to load, since static analysis would not find that image reference.
Work plan
- [ ] Add new empty JS test script and add to package.json and include in CI (include in
yarn test). - [ ] Create script
- [ ] Set
$unusedFiles =all files in build - [ ] Loop through build/**/*.html and list every
href="..."src="..."- [ ] Ignore absolute links (I assert: it is best practice to always use relative links for content on your own site)
- [ ] Resolve relative URLs
- [ ] Remove this item from
$unusedFiles - [ ] If link is to an extensionless URL and FILE.html exists, then remove that from
$unusedFiles
- [ ] Print remaining items in
$unusedFiles, those are errors
- [ ] Set
A bash script for this is shown at https://github.com/modern-training-solutions/public-websites/issues/9238#issue-3346484302
implemented at https://github.com/fulldecent/github-pages-template/blob/main/test/unused-assets.mjs