Embed Only Used Scripts And Styles In HTML File

- 1 answer

Does anyone know of a tool that can look at a webpage with its styles and scripts and images, and then create an HTML file which has those styles and scripts and images embedded, but only the ones which are actually used by that page?

I have a typical "this site is offline for maintenance" page, which is actually an entire website in its own right, based on Bootstrap 3. I want to reduce this whole website into a single file with only the images, CSS and JS required to display the page.


Using the typical browser Save File functionality does not achieve what I want, as it firstly does not embed the CSS/JS resources in the page, but saves them in a subfolder and references them from there; and secondly, does not appear to strip out the styles and scripts that are not directly referenced by that page, rather saving the files in their entirety.



I believe SnappySnippet will help. It extracts the HTML & CSS from an element and sends it to e.g. jsfiddle to review. You'd extract it from the HTML element, should work.

Regrettably, it doesn't do JS, but for a Maintenance page it should work fine.

Some details from the creator on SO and here on YouTube.