資訊專欄INFORMATION COLUMN
摘要：首先散文件是有害處的，第一是，散文件可能沒(méi)有版本號(hào)的區(qū)分，這樣因?yàn)榫彺鎸?dǎo)致第二是散文件會(huì)嚴(yán)重拖慢性能，因?yàn)楹芏嗌⑽募粌H消耗請(qǐng)求資源，而且是在串行消耗。
基本認(rèn)識(shí)
開發(fā)環(huán)境和線上環(huán)境的區(qū)別
在很久以前，前端的部署其實(shí)比較簡(jiǎn)單，開發(fā)環(huán)境下，靜態(tài)資源往服務(wù)器上面一扔就ok了，如果考慮下優(yōu)化或者代碼保護(hù)，也只是加一個(gè)代碼壓縮和混淆。沒(méi)錯(cuò)，剛?cè)胄械臅r(shí)候我就是這么干的。。。
但是隨著前端復(fù)雜度的發(fā)展，上面的做法已經(jīng)無(wú)法滿足需求了，特別是AMD,CMD概念的引入，打包合并就變成一項(xiàng)基本工作了。
舉一個(gè)requirejs的例子，在一個(gè)復(fù)雜點(diǎn)的前端系統(tǒng)中，你能想象不打包直接上線嗎，那樣換來(lái)的可能就是打開首頁(yè)就需要download幾十個(gè)甚至上百個(gè)模塊資源，這種行為是對(duì)網(wǎng)絡(luò)資源的一種無(wú)謂消耗。所以對(duì)應(yīng)requirejs有個(gè)r.js，就是專門消滅這種無(wú)謂請(qǐng)求消耗的，它做的事情也比較簡(jiǎn)單，按照一定規(guī)則，把各種模塊合并成一個(gè)，這樣在上線是一次請(qǐng)求就能download需要的所有js。
開發(fā)環(huán)境代碼和線上代碼區(qū)別
首先大家可以在構(gòu)建時(shí)取消類似壓縮，混淆這幾部，可以觀察下，構(gòu)建完成后的代碼，會(huì)和開發(fā)時(shí)你所寫的有差別，開發(fā)環(huán)境的代碼都經(jīng)過(guò)了編譯處理，根據(jù)一定的規(guī)則重新編譯過(guò)。
舉一個(gè)例子，我們?cè)谑褂胏ss3時(shí)，如果去自己寫樣式去適配chorme,safari,opera等等會(huì)累死。但是我們按照一個(gè)規(guī)則寫一個(gè)，在構(gòu)建時(shí)，代碼自動(dòng)做補(bǔ)全，是不是就很方便，能提高不少效率。
再舉個(gè)例子，現(xiàn)在比較前沿的已經(jīng)在開發(fā)環(huán)境下使用ES6了，但是想要在瀏覽器端直接運(yùn)行還需要一段日子，但是沒(méi)事，我們有Babel之類的工具，可以在編譯時(shí)實(shí)現(xiàn)ES6到ES5的代碼轉(zhuǎn)換。這種用法我還沒(méi)有用過(guò)，但是通過(guò)構(gòu)建，我們可以用于嘗試一些新的東西。提前做一些技術(shù)積累。
前端工程化核心環(huán)節(jié)
從前面兩點(diǎn)大家應(yīng)該能看出構(gòu)建這一步的重要性了吧，可以說(shuō)需要做到前端工程化，提高開發(fā)效率等，構(gòu)建編譯這一個(gè)步驟絕對(duì)是核心步驟之一。他的角色不遜色于搭建service，項(xiàng)目腳手架等等
具體舉例百度前端不僅有個(gè)fis（前端集成解決方案），還有一個(gè)edp，也是一個(gè)前端集成解決方法，主要是百度商業(yè)體系的前端在使用。
由于我們一直在使用edp，所以下面用edp舉例去了解下前端構(gòu)建
下面介紹一下我們自己系統(tǒng)中的一些使用
首先是js模塊的合并，我們會(huì)按照首屏加載和可以懶加載的功能劃分，將模塊合并成整體，這樣就避免了散文件的出現(xiàn)。首先散文件是有害處的，第一是，散文件可能沒(méi)有版本號(hào)的區(qū)分，這樣因?yàn)榫彺鎸?dǎo)致bug；第二是散文件會(huì)嚴(yán)重拖慢性能，因?yàn)楹芏嗌⑽募粌H消耗請(qǐng)求資源，而且是在串行消耗。
將js用到的模板的合并，目的也是減少無(wú)謂的請(qǐng)求。
將less轉(zhuǎn)換成css進(jìn)行合并
將js文件壓縮處理
將合并后的文件進(jìn)行加上文件MD5版本號(hào)處理，MD5的目的就是基于文件內(nèi)容解析出版本號(hào)，這樣如果某個(gè)模塊沒(méi)有變更過(guò)，可以一直使用緩存，提高性能。
將合并后并且包含MD5的文件的path更新到首頁(yè)html的require的config中
修改文件引用對(duì)應(yīng)的path，因?yàn)轭愃朴趈s引用的模板和css都需要更新到打包合并的path上
清理輸出時(shí)的無(wú)用文件
添加版權(quán)信息等等
上面是一個(gè)基本流程，如果有特殊的需求，可以繼續(xù)添加處理模塊。
例如想引入reactjs，如果是構(gòu)建時(shí)打包的話，我們肯定不希望上線的代碼里面有一個(gè)browser.min.js文件，這樣不僅增加了靜態(tài)資源，而且增加了一個(gè)jsx翻譯處理。那么我們可以在構(gòu)建時(shí)增加一個(gè)jsx2js的步驟，這樣就達(dá)到了，開發(fā)使用jsx，但是發(fā)布上線時(shí)，自動(dòng)處理成了js代碼。
這種構(gòu)建處理，我理解出發(fā)點(diǎn)都是從性能角度考慮的。
對(duì)于一線的業(yè)務(wù)開發(fā)過(guò)程，我們期望的是高效的開發(fā)業(yè)務(wù)，并不能把性能等等要求強(qiáng)加到業(yè)務(wù)開發(fā)中，不然我們業(yè)務(wù)開發(fā)是低效的，而且，隨著性能優(yōu)化策略的變更，我們無(wú)法隨意的在業(yè)務(wù)中修改代碼及時(shí)配合，就算是有人力修改，也可能導(dǎo)致bug。
所以將構(gòu)建和業(yè)務(wù)解耦也是很關(guān)鍵的，只要業(yè)務(wù)開發(fā)符合某個(gè)規(guī)范，我們可以根據(jù)性能優(yōu)化的點(diǎn)隨時(shí)更新優(yōu)化策略，構(gòu)建代碼的差別也是僅僅體現(xiàn)在性能上，而不會(huì)延生到業(yè)務(wù)中。
大家可以看看前面幾篇文章《如何避免工程效率陷阱》，《如何在大公司中成長(zhǎng)》我們?cè)趽肀岸斯こ袒瘯r(shí)，不要停留在使用階段，也需要花點(diǎn)時(shí)間研究下原理，不然就很容易被工程了，因?yàn)槟阋嘈盼磥?lái)前端的工程化只會(huì)讓你的業(yè)務(wù)開發(fā)更加簡(jiǎn)單，關(guān)心的東西更少。
個(gè)人博客：http://tangguangyao.github.io/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86125.html
摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁(yè)響應(yīng)速度餓了么升級(jí)實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁(yè)響應(yīng)速度、餓了么PWA 升級(jí)實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆...
摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...
摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問(wèn)題是處理瀏覽器兼容問(wèn)題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言 說(shuō)到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如： 通過(guò) webpack / parcel / gulp 構(gòu)建項(xiàng)目。 通過(guò) parcel / gulp / b...
摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目?jī)?nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目?jī)?nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
閱讀 2870·2021-09-22 15:43
閱讀 4796·2021-09-06 15:02
閱讀 859·2019-08-29 13:55
閱讀 1692·2019-08-29 12:58
閱讀 3081·2019-08-29 12:38
閱讀 1259·2019-08-26 12:20
閱讀 2275·2019-08-26 12:12
閱讀 3324·2019-08-23 18:35
