一個好的前端開發模式總結

背景

隨着社會的不斷進步，人們慢慢從物質消費昇華到了精神消費，前端也相比原來重要了許多，如何開發好一個項目，開發意識很是重要，這時候應該如何更好的開發一個前端網站的流程尤其重要。

開發階段

1.根據公司實際狀況選擇框架技術

前端如今比較主流的三大框架自行選擇。
例如react+webpack+es6+dva

webpack:模塊打包，處理jsx、less、image、熱更新、按需加載、各個完善的打包插件,打包方式按本身需求配置（分包、壓縮等等）將項目運行速度提高，優化空間很大

react:虛擬dom，減小DOM操做，虛擬dom算法能夠比較數據變化的狀況進行更新，將渲染速度達到最高，setState綁定數據，開發效率更高，更好的進行組件開發

es6:前端書寫代碼更加方便，提供了不少方便的函數操做數據，以更少的代碼作更多的事（對象合併，數據讀取，循環遍歷等等），大部分瀏覽器已經兼容，babel也能夠將es6代碼編譯成es5

dva:基於Redux的前端應用開發框架，能夠省去不少redux的代碼，可以很是簡單的實現異步交互以及全局數據流

2. 提取公用組件（查詢組件，新增編輯組件、富文本編輯組件、麪包屑等等）

公用組件在項目中開發很是重要，要時刻具有組件化的意識，能夠借鑑
組件開發方案以及前端組件化開發方向

• 針對常常會使用的組件提取成公用組件
• 組件化開發要具有開發的意識，怎麼寫出一個較好維護的前端組件
• 如何管理開發的組件，可使用npm上傳到npm倉庫，方便統一的維護以及管理，能夠借鑑react組件發佈到npm

3. 提取公用函數

項目中能夠複用不少的公用函數（正則表達式驗證、獲取url，數組的操做等等），能夠將他們提取出來，封裝成公用函數庫，拿來使用，也能夠上傳到npm庫進行管理，其他的開發者也能夠更方便的使用

• 方便維護
• 提高本身的開發效率
• 能夠不斷迭代更多好用的函數

4.css模塊化開發

怎麼實現css模塊化，css模塊化

• 可讓命名更加規範，多人開發出現的問題更少
• 提升代碼重用率
• 提升開發效率
• 公用的css能夠提取出來放置到cdn加載

後續優化

靜態資源能夠走cdn

• 多域名加載資源
• 文件可能已經被加載過並保存有緩存
• 有效防止網站被攻擊

webpack打包優化

• HappyPack優化
• CommonsChunk分包，抽離公共依賴
• DllPlugin進行打包優化
• ExtractTextPlugin分離css
• UglifyJsPlugin壓縮代碼
• gzip壓縮

總結：
前端開發時刻都要具有組件化開發的意識，公用的代碼塊以及函數塊，樣式表均可以放置到npm倉庫中，這樣後面開發效率也會愈來愈高，出問題的狀況愈來愈少