前端的工程化

背景

前端这个职位的诞生也有短短的十年。而在十年之前，我不认识你，那会还叫网页制作，用着一个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也慢慢觉得自己牛逼起来，却不知道，他的进化之旅才刚刚开始。