coolie 之 HTML 文件的资源分析、资源替换、内容压缩

发布于 2021-11-27 11:57:54 字数 4818 浏览 1296 评论 0

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 资源

 和  之间的 link 文件会被读取到，然后读取这些样式文件的资源进行分析。

img 资源

coolie 分析 img 标签的 src 属性，读取静态资源的地址，进行资源定位分析（更多阅读：参考后文）。

coolie 模块加载器分析

coolie 模块加载器，配置了模块的配置文件和模块的入口文件。

资源替换

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

文件压缩

coolie 会对style、script标签内的内容分别进行样式和脚本压缩，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>

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