前端的工程化

背景

前端这个职位的诞生也有短短的十年。而在十年以前，我不认识你，那会还叫网页制做，用着一个Adobe很是牛逼的软件叫Dreamweaver。这是一个神奇的软件，绚丽多彩的网页经过它，拖拖拽拽，就这么梦幻般的生成了。网页制做师们，像一群织梦的妇人，心灵手巧，耐苦耐劳，从不抱怨。

直到有一天。

有位妇人（第一位妇人）站出来讲：

我不用Dreamweaver了，它生成的网页垃圾代码太多，并且兼容性问题不少，特别是IE下，制做出来和实际展现彻底不同，修改还麻烦，好坑爹。

第二位妇人也站了出来：

对！

第三位妇人站了出来：

说得好！

第四位妇人站了出来：

我要手写代码！

自此，前端工程师诞生了！

最初的前端开发

网页开始逐步由拖拽生成转变为手写代码，今后，手写HTML，CSS，Javascript，会点PS掌握切图，成为了前端妇人们长期赖以生存的技能。

手写的代码什么样呢？最简单的就是下面这样。

demo.html

html...
<link rel="stylesheet" href="a.css"/>
<link rel="stylesheet" href="b.css"/>
...



<p class="foo">Wish you happy everyday!</p>

a.css

css.foo{
  color: red;
}

这即是最初的前端开发。

缓存

如上的「最简单的手写代码」上线后。

第一次访问：

第二次访问：

会发现，两次css文件的请求有明显区别，不断是大小（Size）、时间（Timeline）和状态（Status）。这即是缓存在做祟。

用户在非首次访问时，速度会更快，花费时间也少。这么看来：

缓存太好了，不用每次都去服务器下载静态资源，真想把什么都给缓存下来。

直到有一天。

有位妇人（第一位妇人，妇人A）要更新a.css：

css.foo{
  color: blue;
}

更新完上线，老板去访问时，发现.foo的color仍是red：

妇人A你肯定更新了么？我这怎么没生效！

妇人A惊呆了：

老板，要清除缓存，每次更新都得清除缓存呀！不信你问QA。

老板：

....

QA：

....

这时候第二位妇人（妇人B）站了出来：

你上线时把a.css换个名字不就好了。改为a1.css，浏览器不就用不到缓存了嘛~ ╮(￣▽￣")╭

妇人B的机智和卖萌完全征服了妇人A。

合并网络请求

妇人A慢慢开始接触大项目，CSS和JS文件愈来愈多：

html...
<link rel="stylesheet" href="a.css"/>
<link rel="stylesheet" href="b.css"/>
<link rel="stylesheet" href="c.css"/>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
...

老板又来了，找妇人A：

能不能把你引入的这些css和js合并起来啊，看着上面的网络请求一大坨内心难受啊。

身为处女座的老板，仍是懂不少的。

妇人A：

有啥好处咩~ ヾ(≧▽≦*)o

妇人A被妇人B影响，也开始卖萌起来。

老板：

好处多多啊，合并静态文件，减小网络请求，大大加快了网页请求速度啊！

因而，妇人A按照老板的要求，把a.css、b.css和c.css合并成all.css，把a.js、b.js和c.js合并成all.js。

压缩静态文件

过了几天，妇人B也找到了妇人A：

既然你都合并CSS和JS，顺便把它们都压缩下吧。能够减小文件大小，减小网络请求的Size。好事作到底。

妇人A不解：

为熟么捏~

妇人B：

由于我萌啊~ （￣ c￣）

听了妇人B的解释，妇人A彷佛明白了什么，赶忙去网上找了些压缩工具，把all.css压缩成min.all.css，把all.js压缩成了min.all.js。

工程化

最终由妇人A住到的这个项目的代码变成了这样：

html<link rel="stylesheet" href="min.all.css"/>
<script type="text/javascript" src="min.all.js"></script>

期间经历了

• 手写前端代码
• 消除缓存影响
• 合并网络请求
• 压缩静态资源

前端妇人们再也不只管写HTML，CSS和JS，还要考虑性能。

前端开发已然成为一个工程化问题。

经历了这么多，妇人A也慢慢以为本身牛逼起来，殊不知道，他的进化之旅才刚刚开始。