前端的工程化
背景
前端這個職位的誕生也有短短的十年。而在十年之前，我不認識你，那會還叫網頁制作，用著一個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也慢慢覺得自己牛逼起來，卻不知道，他的進化之旅才剛剛開始。
總結
- 上一篇： Matlab的部分文件操作
- 下一篇： 搜索引擎汇总