webpack + react 前端工程化實踐和暫不極致最佳化

ive發表於2018-01-29

技術結構

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

git地址:https://github.com/IveHD/web-project-go

相關文章