coolie 之 HTML 文件的资源分析、资源替换、内容压缩
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 会对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>
如上,相关空白、样式、脚本都进行了压缩。
总结
构建工具 | HTML 文件资源分析 | HTML 文件资源替换 | HTML 文件压缩 |
---|---|---|---|
百度 fis | 半自动 | 繁杂配置 | 不可以 |
淘宝 spm | 无法 | 无法 | 无法 |
webpack | 无法 | 无法 | 无法 |
coolie | 全自动 | 少量配置 | 可以 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
更多
发布评论