在 HTML 文件中仅嵌入使用的脚本和样式

Embed only used scripts and styles in HTML file

本文关键字：脚本样式文件 HTML 更新时间：2023-09-26

有谁知道一个工具可以查看网页及其样式、脚本和图像，然后创建一个嵌入了这些样式、脚本和图像的 HTML 文件，但只有该页面实际使用的那些？

我有一个典型的"此站点已脱机以进行维护"页面，它实际上本身就是一个基于Bootstrap 3的整个网站。我想将整个网站简化为一个文件，其中只有显示页面所需的图像，CSS和JS。

更新

使用典型的浏览器保存文件功能并不能实现我想要的，因为它首先不会在页面中嵌入 CSS/JS 资源，而是将它们保存在子文件夹中并从那里引用它们;其次，似乎没有去除该页面未直接引用的样式和脚本，而是完整保存文件。

我相信

SnappySnippet会有所帮助。它从一个元素中提取HTML和CSS，并将其发送到jsfiddle进行审查。你会从HTML元素中提取它，应该可以工作。

遗憾的是，它

不执行 JS，但对于维护页面，它应该可以正常工作。

创作者在SO和YouTube上的一些细节。