We were seeing issue with outdated cached CSS and JS breaking pages
Adding unique hashes to their filenames should "bust" the cache, as the browser will recognize them as new files
As a final step in the build action, let's run a Node script that will:
Create copies of .css and .js bundles whose filenames have added hashes based on their contents
Find and replace those names throughout all built .html files
Point of caution: the string find-and-replace is a bit naive and could (in theory) replace things it shouldn't, or miss some things it should
I'm totally open to suggestions or improvements here
Implementation notes
Rollup and PostCSS do have ways to add these hashes as part of their own build steps
The issue is getting those updated names back into the HTML
Python/Jinja could do this by reading "manifest" files left behind by the other steps and injecting the new names into the source
An issue with that: Tailwind's build step needs to analyze built HTML to determine which class names are in use. HTML needs built and hashed CSS to reference the right file. Chicken/egg problem
Other miscellaneous issues include handling quick/targeted build updates while watching files during development
This solution side steps both of those problems by only doing the cache bust step when building for production, and after everything else is finished
Type of change
[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Documentation
How has this been tested?
Locally ran npm run build and spot-checked multiple HTML pages for updated references
Description
build
action, let's run a Node script that will:I'm totally open to suggestions or improvements here
Implementation notes
watch
ing files during developmentType of change
How has this been tested?
Locally ran
npm run build
and spot-checked multiple HTML pages for updated references