背景

前端這個職位的誕生也有短短的十年。而在十年之前，我不認識你，那會還叫網頁制作，用著一個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也慢慢覺得自己牛逼起來，卻不知道，他的進化之旅才剛剛開始。

總結

以上是生活随笔為你收集整理的前端的工程化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。