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