接前文,下面开始进入静态资源的合并与压缩中的第2项:CSS 文件的合并与压缩。

预备

在前文的基础上,准备以下文件和目录

|-- demo
|-- src
|    |-- single1.js
|    |-- single2.js
|    |-- single1.css
|    |-- single2.css
|    `-- body.png
`-- index.html

single1.css 的内容为

html {
    margin: 0;
    padding: 0;
}

single2.css 的内容为

body {
    background: url("./body.png");
}

index.html 内容为

<!DOCTYPE html>

<!-- coolie -->
<link rel="stylesheet" type="text/css" href="./src/single1.css">
<link rel="stylesheet" type="text/css" href="./src/single2.css">
<!-- /coolie -->

<!-- coolie -->
<script src="./src/single1.js"></script>
<script src="./src/single2.js"></script>
<!-- /coolie -->

webpack

无法直接做到。

coolie

无须修改配置,直接用前一篇文章的配置文件。

执行coolie build之后,index.html(为了便于阅读,已经加了断行) 为:

<!DOCTYPE html>
<link rel="stylesheet" href="/src/bdd8e022ce7470f06d7183daabac0b79.css">
<script src="/src/6c762d4e4b7d1e9504281bc12abd65b9.js"></script>
<!--coolie@0.20.10-->

来看下构建之后的 bdd8e022ce7470f06d7183daabac0b79.css 文件:

/*coolie@0.20.10*/
html{margin:0;padding:0}
body{background:url(a821bd973bf1114e6ed1d9170b6e84eb.png)}

聪明的 coolie 也将 css 引用的图片进行版本管理了,看下relationship-map.json

{
    "index.html": {
        "css": {
            "src/bdd8e022ce7470f06d7183daabac0b79.css": [
                "src/single1.css",
                "src/single2.css"
            ]
        },
        "js": {
            "src/6c762d4e4b7d1e9504281bc12abd65b9.js": [
                "src/single1.js",
                "src/single2.js"
            ]
        },
        "main": ""
    }
}

此时的目录结构为:

|-- dest
|-- src
|    |-- bdd8e022ce7470f06d7183daabac0b79.css
|    |-- 6c762d4e4b7d1e9504281bc12abd65b9.js
|    `-- a821bd973bf1114e6ed1d9170b6e84eb.png
|-- index.html
`-- relationship-map.json

一张图说明一切

总结

webpack

  • 优点
    • 没有
  • 缺点
    • 无法实现

coolie

  • 优点
    • 不需要修改配置
    • 只需要在页面上添加引用
    • 完美实现了样式的合并与压缩
    • 同时处理了样式中引用的图片
    • 同时对 css 和图片进行了版本管理
    • 同时修改了 html 文件的引用
  • 缺点

综,coolie 完美的实现了要求,做的非常漂亮,得满分 10 分,webpack 无法直接做到,得 0 分。