引子

HTML 文件是面向用户的主要页面,对它的构建也是非常有必要的。可能你的 HTML 文件在开发环境是这样的:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!--这些 css link 会被解析,然后压缩、合并-->
    <!--coolie-->
    <link rel="stylesheet" href="/static/css/1.css"/>
    <link rel="stylesheet" href="/static/css/2.css"/>
    <link rel="stylesheet" href="/static/css/3.css"/>
    <link rel="stylesheet" href="/static/css/4.css"/>
    <!--/coolie-->

</head>
<body>


<!--[if IE]>
条件注释是不会被删除的。
<![endif]-->


<!--这个注释,是会被构建删除的-->


<!--
- 这个注释,也会被构建删除
- 这个注释,也会被构建删除
-->


<!--
这个注释,不会被构建删除
-->


<!--图片资源文件-->
<img src="/static/img/abc1.png" alt="abc"/>

<!--各种标签加上“coolieignore”属性,会被 coolie 在构建过程中忽略-->
<img src="/static//abc2.png" alt="abc" coolieignore/>

<img src="/static/img/abc3.png" alt="abc"/>

<!--预格式内容-->
<pre>
    var a = 1;
    var b = 2;
</pre>


<!--预格式内容-->
<textarea>
    var a = 1;
    var b = 2;
</textarea>


<!--预格式内容-->
<script type="text/template">
    保留格式
</script>


<!--脚本资源文件-->
<script>
    var a = 1;
    var b = 2;
</script>


<!--coolie 模块加载器配置信息解析-->
<script src="/static/js/coolie.min.js"
        data-config="./coolie-config.js"
        data-main="./app/index.js"></script>


</body>
</html>

资源分析

coolie 通过分析源代码,来进行资源分析:

link 资源

<!--coolie--><!--/coolie-->之间的link文件会被读取到,然后读取这些样式文件的资源进行分析(更多阅读:fcoolie 能做的:CSS 模块依赖分析、合并、压缩、版本管理)。

img 资源

coolie 分析 img 标签的src属性,读取静态资源的地址,进行资源定位分析(更多阅读:参考后文)。

coolie 模块加载器分析

coolie 模块加载器,配置了模块的配置文件和模块的入口文件(更多阅读:fcoolie 能做的:JS 模块依赖分析、合并、压缩、版本管理)。

资源替换

对上述资源分析的结果进行替换。

文件压缩

coolie 会对stylescript标签内的内容分别进行样式和脚本压缩,script标签会默认排除text/template属性的标签,也可以手动添加coolieignore来排除。

最终结果

未压缩版

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!--这些 css link 会被解析,然后压缩、合并-->
    <link rel="stylesheet" href="/static/css/abcdef123456.css"/>

</head>
<body>


<!--[if IE]>
条件注释是不会被删除的。
<![endif]-->


<!--这个注释,是会被构建删除的-->


<!--
- 这个注释,也会被构建删除
- 这个注释,也会被构建删除
-->


<!--
这个注释,不会被构建删除
-->


<!--图片资源文件-->
<img src="/static/img/abcdef123456.png" alt="abc" />

<!--各种标签加上“coolieignore”属性,会被 coolie 在构建过程中忽略-->
<img src="/static//abc2.png" alt="abc" />

<img src="/static/img/xyzabc8901.png" alt="abc" />

<!--预格式内容-->
<pre>
    var a = 1;
    var b = 2;
</pre>


<!--预格式内容-->
<textarea>
    var a = 1;
    var b = 2;
</textarea>


<!--预格式内容-->
<script type="text/template">
    保留格式
</script>


<!--脚本资源文件-->
<script>
    var a = 1;
    var b = 2;
</script>


<!--coolie 模块加载器配置信息解析-->
<script src="/static/js/coolie.min.js"
        data-config="./coolie-config.js"
        data-main="./app/index.js"></script>


</body>
</html>

压缩版

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <link rel="stylesheet" href="/static/css/abcdef123456.css"/></head><body><!--[if IE]>
条件注释是不会被删除的。
<![endif]--><!--这个注释,不会被构建删除--><img src="/static/img/abcdef123456.png" alt="abc" /><img src="/static//abc2.png" alt="abc" /><img src="/static/img/xyzabc8901.png" alt="abc" /><pre>
    var a = 1;
    var b = 2;
</pre><textarea>
    var a = 1;
    var b = 2;
</textarea><script type="text/template">
    保留格式
</script><script>var a=1,b=2;</script></body></html>

如上,相关空白、样式、脚本都进行了压缩。

总结

构建工具 HTML 文件资源分析 HTML 文件资源替换 HTML 文件压缩
百度 fis 半自动 繁杂配置 不可以
淘宝 spm 无法 无法 无法
webpack 无法 无法 无法
coolie 全自动 少量配置 可以