技術結構
webpack + react + react-router
功能實現
關於打包
1.基於react-router的自定義打包code split。
2.分包非同步按需載入。
3.CommonsChunkPlugin公共程式碼打包提取。
4.ParallelUglifyPlugin多執行緒程式碼壓縮。
5.HappyPack多執行緒loader任務處理。
6.webpack tree shaking
開發模式
1.express + webpack-dev-middleware + webpack-hot-middleware 本地開發伺服器和檔案修改熱載入及實時重新整理。
2.mock資料,data.json進行介面和模擬資料配置,實時生效。
3.基於nodejs的http模組,實現本地伺服器http請求代理轉發,開發模式下直接請求測試環境或線上RESTfull api介面。
業務功能支援
1.基於react-router的頁面跳轉控制
2.可配置的多級選單元件
3.基於cookie的許可權控制功能
4.客戶端http請求封裝
5.引入element-react、antd兩個常用ui元件庫(對element-react做了通用程式碼抽離,antd做了元件按需載入)
6.整合less
使用說明
安裝npm依賴
npm i --save
開發模式啟動(使用data.json mock資料)
npm run dev
開發模式啟動(使用代理轉發)
修改'build/proxy.js'的http option配置(hostname屬性和header自定義配置)
npm run dev --pxy
生產環境打包
'build/config.js'可對打包入口和輸出路徑做配置。
npm run build