前端的工程化

背景

前端這個職位的誕生也有短短的十年。而在十年以前，我不認識你，那會還叫網頁製做，用着一個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也慢慢以爲本身牛逼起來，殊不知道，他的進化之旅纔剛剛開始。