背景

前端這個(gè)職位的誕生也有短短的十年。而在十年之前，我不認(rèn)識(shí)你，那會(huì)還叫網(wǎng)頁(yè)制作，用著一個(gè)Adobe非常牛逼的軟件叫Dreamweaver。這是一個(gè)神奇的軟件，絢麗多彩的網(wǎng)頁(yè)通過(guò)它，拖拖拽拽，就這么夢(mèng)幻般的生成了。網(wǎng)頁(yè)制作師們，像一群織夢(mèng)的婦人，心靈手巧，耐苦耐勞，從不抱怨。

直到有一天。

有位婦人（第一位婦人）站出來(lái)說(shuō)：

我不用Dreamweaver了，它生成的網(wǎng)頁(yè)垃圾代碼太多，而且兼容性問(wèn)題很多，特別是IE下，制作出來(lái)和實(shí)際展示完全不一樣，修改還麻煩，好坑爹。

第二位婦人也站了出來(lái)：

對(duì)！

第三位婦人站了出來(lái)：

說(shuō)得好！

第四位婦人站了出來(lái)：

我要手寫(xiě)代碼！

自此，前端工程師誕生了！

最初的前端開(kāi)發(fā)

網(wǎng)頁(yè)開(kāi)始逐步由拖拽生成轉(zhuǎn)變?yōu)槭謱?xiě)代碼，從此，手寫(xiě)HTML，CSS，Javascript，會(huì)點(diǎn)PS掌握切圖，成為了前端婦人們長(zhǎng)期賴以生存的技能。

手寫(xiě)的代碼什么樣呢？最簡(jiǎn)單的就是下面這樣。

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; }

這便是最初的前端開(kāi)發(fā)。

緩存

如上的「最簡(jiǎn)單的手寫(xiě)代碼」上線后。

第一次訪問(wèn)：

第二次訪問(wèn)：

會(huì)發(fā)現(xiàn)，兩次css文件的請(qǐng)求有明顯區(qū)別，不斷是大小（Size）、時(shí)間（Timeline）和狀態(tài)（Status）。這便是緩存在作祟。

用戶在非首次訪問(wèn)時(shí)，速度會(huì)更快，花費(fèi)時(shí)間也少。這么看來(lái)：

緩存太好了，不用每次都去服務(wù)器下載靜態(tài)資源，真想把什么都給緩存下來(lái)。

直到有一天。

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

css.foo{color: blue; }

更新完上線，老板去訪問(wèn)時(shí)，發(fā)現(xiàn).foo的color還是red：

婦人A你確定更新了么？我這怎么沒(méi)生效！

婦人A驚呆了：

老板，要清除緩存，每次更新都得清除緩存呀！不信你問(wèn)QA。

老板：

....

QA：

....

這時(shí)候第二位婦人（婦人B）站了出來(lái)：

你上線時(shí)把a(bǔ).css換個(gè)名字不就行了。改成a1.css，瀏覽器不就用不到緩存了嘛~ ╮(￣▽￣")╭

婦人B的機(jī)智和賣(mài)萌徹底征服了婦人A。

合并網(wǎng)絡(luò)請(qǐng)求

婦人A慢慢開(kāi)始接觸大項(xiàng)目，CSS和JS文件越來(lái)越多：

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> ...

老板又來(lái)了，找婦人A：

能不能把你引入的這些css和js合并起來(lái)啊，看著上面的網(wǎng)絡(luò)請(qǐng)求一大坨心里難受啊。

身為處女座的老板，還是懂很多的。

婦人A：

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

婦人A被婦人B影響，也開(kāi)始賣(mài)萌起來(lái)。

老板：

好處多多啊，合并靜態(tài)文件，減少網(wǎng)絡(luò)請(qǐng)求，大大加快了網(wǎng)頁(yè)請(qǐng)求速度啊！

于是，婦人A按照老板的要求，把a(bǔ).css、b.css和c.css合并成all.css，把a(bǔ).js、b.js和c.js合并成all.js。

壓縮靜態(tài)文件

過(guò)了幾天，婦人B也找到了婦人A：

既然你都合并CSS和JS，順便把它們都?jí)嚎s下吧。可以減少文件大小，減少網(wǎng)絡(luò)請(qǐng)求的Size。好事做到底。

婦人A不解：

為熟么捏~

婦人B：

因?yàn)槲颐劝 （￣ c￣）

聽(tīng)了婦人B的解釋，婦人A似乎明白了什么，趕緊去網(wǎng)上找了些壓縮工具，把a(bǔ)ll.css壓縮成min.all.css，把a(bǔ)ll.js壓縮成了min.all.js。

工程化

最終由婦人A住到的這個(gè)項(xiàng)目的代碼變成了這樣：

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

期間經(jīng)歷了

• 手寫(xiě)前端代碼
• 消除緩存影響
• 合并網(wǎng)絡(luò)請(qǐng)求
• 壓縮靜態(tài)資源

前端婦人們不再只管寫(xiě)HTML，CSS和JS，還要考慮性能。

前端開(kāi)發(fā)已然成為一個(gè)工程化問(wèn)題。

經(jīng)歷了這么多，婦人A也慢慢覺(jué)得自己牛逼起來(lái)，卻不知道，他的進(jìn)化之旅才剛剛開(kāi)始。

總結(jié)

以上是生活随笔為你收集整理的前端的工程化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。