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

发布于 2021-11-27 11:57:54 字数 4818 浏览 1295 评论 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 资源

<!--coolie--> 和 <!--/coolie--> 之间的 link 文件会被读取到,然后读取这些样式文件的资源进行分析。

img 资源

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

coolie 模块加载器分析

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

资源替换

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

文件压缩

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全自动少量配置可以

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

泛滥成性

暂无简介

0 文章
0 评论
1006 人气
更多

推荐作者

6118422078

文章 0 评论 0

Bonjour°[大白

文章 0 评论 0

別甾虛僞

文章 0 评论 0

qq_FynBW0

文章 0 评论 0

浅笑依然

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文