前言：

最近在學習前端，之前學習過JavaScript、css、jQuery等等前端知識，由於公司採取前後端分離技術，面對公司的紅利，作為後端開發的我開始系統的學習前端知識，之前在聽技術分享中，聽到了前端工程化，但是當時給我的觸動並沒有那麼大，現在自己深切閱讀中，確是別具一番風景中。

核心：

背景：

為滿足需求以及提升端開發效率和執行效能，前端工程化應運而生。

what：

工程化：

所謂工程化，就讓人們想到一個浩大的工程，前端工程化，我們可以簡單認為是將框架的職責拓寬再拓寬，主旨是幫業務團隊更好的完成需求，用工程化的思想去開發前端。

前端：

前端是一種GUI軟體。

從本質上講，所有Web應用都是一種執行在網頁瀏覽器中的軟體，這些軟體的圖形使用者介面（Graphical User Interface，簡稱GUI）即為前端。

前端工程化需要考慮以下問題：

重複工作：如通用的流程控制機制，可擴充套件的UI元件、靈活的工具方法

重複優化：如降低框架層面升級帶給業務團隊的耗損、幫助業務在無感知情況下做掉大部分優化（比如打包壓縮什麼的）

開發效率：如幫助業務團隊寫可維護的程式碼、讓業務團隊方便的除錯程式碼（比如Hybrid除錯）

前端工程化：總結為一句話為用工程化的思想帶領前端的開發，目的為更好的管理前端，提高開發效率。

發展：

第一階段：庫/框架選型

技術選型，是前端工程化建設的第一項任務。

第二階段：簡單構建優化

工具選型，是前端工程第二階段的任務，通過選擇構建工具，對程式碼進行壓縮，校驗，資源合併。

第三階段：JS/CSS模組化開發

模組化開發，是分而治之的思想，是目前前端最流行的分治手段。

第四階段：元件化開發與資源管理

前端相比其他軟體開發，在基礎架構上更加迫切的需要元件化開發和資源管理

作用：

• 生產力提高

合理的開發流程及開發規範，包括程式碼規範、模組化、元件化規範等，運用分治的思想提高生產效率

• 系統可靠性提高

在前端工程化過程中會有相應的自動化程式碼質量檢測方案，保證程式碼規範

• 系統的伸縮性和靈活性

在前端工程化中會有相應的自動化及高度適應性的專案 釋出／部署 方案

• 使用者體驗度

極致的效能優化，包括減少冗餘的介面請求及資源請求、提高快取命中率等，簡言之就是站點的開啟及執行速度

總結：

接下來我會繼續學習前端，下一篇部落格會總結angular，感謝讀者的閱讀！