構建

• 將原始碼轉換成瀏覽器可以執行的程式碼
• 瀏覽器對es規範的實現程度，css預編譯器，mustache模版語法等造成瀏覽器不能執行原始碼

grunt,webpack,gulp之前

• 前端的構建需要藉助其他開發領域的工具，比如ant
• 專業構建js和css的工具需要特殊的語言執行環境，比如java
• grunt,webpack,gulp都是在node.js環境下執行的

構建要考慮的web應用問題

• 除了要考慮瀏覽器執行語言的問題，也要考慮web應用問題
• 開發階段，模組化開發，每個模組都有獨立的css，js，圖片等檔案
• 如果不做處理，每個檔案獨立上線的話，會增加客戶端http請求的數量，影響使用者體驗

構建除轉化語言的其他功能，主要是面向優化的

• 依賴打包：分析檔案依賴關係，將同步依賴的檔案打包在一起，減少http請求數量
• 資源嵌入：將小於64kb的圖片編譯為base64 格式嵌入文件，減少一次http請求
• 檔案壓縮：減少檔案體積，縮少請求時間
• hash指紋：通過給檔名加入hash指紋，應對瀏覽器快取策略。

構建後的改動

• html與js，css，圖片等資源是引用和被引用的關係，構建後被引用的資源有以下改動
• 域名/路徑改變，開發環境和線上環境的域名是不同的，不同型別的資源甚至會部署到不同型別的伺服器上
• 檔名改變，構建後文件名被加上了hash指紋，內容的改變導致hash指紋的改變
• 以上改動會影響，html對被引用資源的url改變，所以對html的構建要注意被引用資源的url同步更新，這個功能叫做功能定位

構建需要面對的問題，3類

• 面向語言的
• 面向優化的
• 面向部署的