背景
隨着社會的不斷進步，人們慢慢從物質消費升華到了精神消費，前端也相比原來重要了許多，如何開發好一個項目，開發意識非常重要，這時候應該如何更好的開發一個前端網站的流程尤為重要。
開發階段
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倉庫中，這樣后面開發效率也會越來越高，出問題的情況越來越少