如何从 web 项目生成单个优化的 html 文件？答案

【问题标题】：How to generate a single optimized html file from web a project?如何从 web 项目生成单个优化的 html 文件？
【发布时间】：2013-06-12 07:22:41
【问题描述】：

我有一个带有单个 html 文件的典型网页。此页面使用 css、javascript 模块 (requirejs) 和图像。我想生成一个包含所有嵌入和缩小的资源的单个 html 文件，包括 html 文件本身。

这是我的结构：

myApp/
   www/
      css/
          css1.css
          css2.css
      img/
          img1.png
          img2.png
      js/
          main.js
          module1.js
      index.html

我想生成这个：

myApp/
   www-build/
      index.min.html

我知道存在不同的工具来优化 javascripts、css 和 html。但问题是如何将它们自动组装到一个文件中。

【问题讨论】：

嗯。任何多次访问该站点的人都会遇到大量的多余流量。这就是为什么这些资源应该是外部的 - 所以它们可以与主要内容分开缓存（当然，将 each 压缩为一个 CSS 文件和一个 js 文件并没有错）
我同意，一般来说，这种做法不是一个好主意。但是当页面很小并且您需要快速响应的页面时，它可能是一个解决方案。想象一下，您正在访问位于地球另一端的服务器的页面。如果用户必须两次访问服务器，那是不一样的。
我明白你的意思，但是当你加快第一页加载的体验时，你最终每次都会减慢它的速度。我估计在大多数情况下这不是一个好交易

标签： javascript optimization web minify gruntjs

【解决方案1】：

我最终使用gruntjs 和一系列繁重的任务来完成这项工作：

一个 Jade 模板，带有用于导入 js 和 css 的 include 指令。
grunt-base64 将图像转换为base64。

玉文件，应该是这样的：

html
    head
        title= "Example Page"
        include css/css1.css
        include css/css2.css
        include js/main.js
        include js/module1.js

    body
        | <img src="data:image/png;base64,
        include img1.b64
        | "/>

        | <img src="data:image/png;base64,
        include img2.b64
        | "/>

        canvas#myCanvas

我还使用uglify等优秀的预定义任务来优化代码。

【讨论】：

【解决方案2】：

你可以试试https://github.com/remy/inliner

你可以安装：

$ npm install -g 内联

然后执行（请参阅inliner --help 了解可能的选项）

$ 内联 index.html > index.min.html

或者您可以通过http://inliner.webapplist.com/在线使用它

【讨论】：

【解决方案3】：

我不确定是否将其生成为一个完整的文件，但您可以使用 Google Granule 压缩 [到一个文件] 并以编程方式即时压缩您的 CSS 文件和 JS 文件。（当页面被加载时）。这将显着减少网页加载时间。

结帐：

http://code.google.com/p/granule/

【讨论】：

【解决方案4】：

您可以在单个文件中包含所有内容，但我认为这不是一个好主意，正如 Pekka 的评论已经指出的那样。但无论如何：您可以将 Javascript 包含在标签中，与 CSS（或内联 CSS）相同。对于图像：您需要将它们转换为字符串才能将它们保存在页面中。 Base64 编码将完成这项工作。这是一个例子：http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

【讨论】：

是的，我知道这是可能的。我要问的是它是否存在自动执行此操作的工具或程序。
这是否是一个好主意值得商榷。当您在 TCP 连接数量有限的移动设备上时，我可以看到这将如何运作良好。如果页面权重很小，我会更喜欢捆绑数据而不是使用多个 TCP 连接。