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

我有一个典型的网页，其中包含一个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

---

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

您可以在单个文件中包含所有内容，但我认为这不是一个好主意，正如Pekka的Commo已经指出的那样。但无论如何，您可以将Javascript包含在标记中，与CSS（或内联CSS）一样。对于图像：您需要将它们转换为字符串，以便将它们保存在页面中。Base64编码将完成这项工作。下面是一个示例：

我最终使用和一系列grunt任务来完成这项工作：

• 带有include指令的模板，用于导入js和css
• 将图像转换为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 

html
头
title=“示例页”
包括css/css1.css
包括css/css2.css
包括js/main.js
包括js/module1.js
身体
| 
| 
画布#我的画布

---

我还使用了和其他优秀的预定义任务来优化代码。

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

结帐：

你可以试试

您可以通过以下方式安装：

$npm安装-g内联线

然后执行（有关可能的选项，请参见

inliner--help

）

$inliner index.html>index.min.html

---

或者您可以在Meh在线使用它。任何人访问该网站超过一次都会遇到大量的多余流量。这就是为什么这些资源应该是外部的——因此它们可以与主要内容分开缓存（当然，将每个内容缩小为一个CSS文件和一个js文件没有错）。我同意，一般来说，这种做法不是一个好主意。但是当页面很小并且需要快速响应页面时，它可能是一个解决方案。假设您正在访问地球另一端的服务器的页面。如果用户必须两次访问服务器而不是一次，这是不一样的。我明白你的意思，但是当你在第一页加载时加快了体验，之后每次都会减慢速度。我估计在大多数情况下这不是一个好交易，我知道这是可能的。我想问的是，是否有一个工具或程序可以自动完成这项工作。这是否是一个好主意是有争议的。我可以看出，当您在一个TCP连接数量有限的移动设备上时，这将如何工作良好。如果页面的权重很小，我会倾向于使用数据包，而不是使用多个TCP连接。