作為一只專注于后臺和服務(wù)器的程序猴子受楼，偶然間看了一下前端開發(fā)祠挫，發(fā)現(xiàn)自己寫的前端代碼簡直是遠古時代的產(chǎn)物悼沿。

前端也得用上mvc框架

一直以來，后臺就是這樣子用mvc框架來開發(fā)慌植。然而前端開發(fā)直接一個頁面义郑，一個html文件，一個css文件非驮，一個js文件。似乎這樣子維護也沒什么問題芙扎，開發(fā)過程也算是比較清晰了填大。

然而遇上了vue這個前端框架之后才發(fā)現(xiàn)，前端頁面書寫是如此方便圈浇，不再用手動寫一堆代碼去操作dom元素靴寂，也不需要使用后臺語言的模板引擎輸出html了，因為vue就可以充當一下模板引擎褐隆，并且渲染交給前端可以減輕服務(wù)器壓力收壕。

前端文件你有壓縮合并嗎轨蛤？

用上框架之后的確是爽，但是一個問題出現(xiàn)了祥山，由于頁面變得越來越復(fù)雜了。為了節(jié)省服務(wù)器帶寬呢澳窑，我們一般會選擇把幾個文件合成一個文件來使用，但是如果對于我們開發(fā)來說分成幾個文件來寫比較便于維護摊聋，so我們這個時候就會使用一些輔助工具來自動合并這些文件成一個文件啦麻裁。對于js文件，有時候我們不希望別人看到我們的源碼煎源，我們就會去混淆一下。

前端開發(fā)以后的趨勢可能是組件化

現(xiàn)在的App和桌面軟件開發(fā)歇僧，每一個界面都是有無數(shù)個組件所構(gòu)成锋拖。但是網(wǎng)頁開發(fā)呢？我們以前一直都是每個頁面都在編寫重復(fù)的代碼兽埃，慢慢的，我們把重復(fù)的內(nèi)容抽離出來慕趴，然后用引入的方式拼成一個完整的html頁面（這種模板渲染可以用后臺引擎也可以用前端的模板引擎）冕房。

但是如果我們把常用的東西視作一個組件來對待的話，我們就需要把這部分區(qū)域的html耙册，css，和js獨立出來详拙。具體可以參考一下vue教程組件那個部分蔓同。

你是如何處理引入的js和css緩存問題的？

在pc端調(diào)試頁面斑粱，似乎改了js和css之后瀏覽器訪問到的都是最新版。但是如果我們用手機調(diào)試的話矿微，幾乎讀取的都是舊數(shù)據(jù)涌矢，所以我們每次修改之后都要為引入加一個隨機數(shù)如：

<script src="/static/abc.js?t=123"></script>

假如你有很多頁面都引入，又都是寫死的話娜庇，我相信你會改到吐，so這些事情還是需要一個工具來做俺叭。

有沒有考慮過發(fā)布的時候是先更新html還是靜態(tài)資源的問題熄守？

也許你會納悶耗跛，這有影響嗎？假如你的網(wǎng)站一直有人訪問调塌，在你發(fā)布的時候都有人訪問。

情況一：先發(fā)布html頁面负间，當html發(fā)布之后政溃，靜態(tài)資源文件沒有發(fā)布的時候，用戶訪問拿到了舊的靜態(tài)資源董虱，并且緩存了申鱼，然后他下一次訪問（在靜態(tài)資源文件發(fā)布之后）捐友，他用的還是舊的css，這個時候撮慨，發(fā)布等于沒發(fā)不呀脆粥。

情況二：先發(fā)布靜態(tài)資源，html文件沒有發(fā)布规伐，一個新用戶來訪問匣缘，他得到的是新靜態(tài)資源和舊html頁面的混合體，這個時候頁面很有可能是錯亂的肌厨。

解決方案：靜態(tài)資源文件更新不覆蓋舊文件柑爸，文件名采用md5方式命名，先發(fā)布靜態(tài)資源表鳍，再發(fā)布html頁面。

前端框架

現(xiàn)在不是以前那種單單一個jquery就行了的時代瓮恭，現(xiàn)在很多都用上vue.js厘熟，Angular，React這些新的前端mvc框架颇玷。

前端打包工具

webpack和grunt等帖渠。

太久沒有接觸前端開發(fā)了竭宰，感覺整個人都脫節(jié)了。順便分享一個自己造的前端打包狞甚，壓縮合并廓旬，并且為靜態(tài)資源自動打上版本號的小輪子：

https://github.com/yubang/modular_front

歡迎大家給點意見哈