說明

玩轉 webpack 學習筆記

商城技術棧選型

前端：

• react 全家桶 + webpack + axios + lib-flexible + slick-carousel

后端：

• koa + mysql + sequelize

商城架構設計

商城界面 UI 設計

React 全家桶環境搭建

1、初始化項目

npm init -y

2、創建項目目錄

創建 actions、reducers、store 等

• src/actions/ 放置所有的 actions
• src/reducers 放置所有的 reducers
• 使用 Provider 傳遞 store，Store 通過 Provider 傳遞給容器組件

3、安裝依賴

安裝 react、react-dom、redux、react-redux

npm i react react-dom redux react-redux -S

安裝 @babel/core

npm i @babel/core -D

安裝 geektime-builder-webpack 用于 webpack 的配置

npm i geektime-builder-webpack -D

這里的腳本都是用的 builder-webpack-geektime 里面的

package.json：

{"name": "shopping-h5","version": "1.0.0","description": "shopping h5","main": "index.js","scripts": {"dev": "webpack-dev-server --config ./node_modules/builder-webpack-geektime/lib/webpack.dev.js --open","build": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.prod.js","build:ssr": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.ssr.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"axios": "^0.19.0","lib-flexible": "^0.3.2","react": "^16.8.6","react-dom": "^16.8.6","react-redux": "^7.1.0","react-slick": "^0.25.2","redux": "^4.0.4","redux-logger": "^3.0.6","redux-thunk": "^2.3.0","slick-carousel": "^1.8.1"},"devDependencies": {"@babel/core": "^7.4.4","@babel/plugin-proposal-class-properties": "^7.5.5","@babel/plugin-syntax-dynamic-import": "^7.2.0","@babel/preset-env": "^7.4.4","@babel/preset-react": "^7.0.0","builder-webpack-geektime": "^1.0.3","webpack": "^4.31.0","webpack-cli": "^3.3.2","webpack-dev-server": "^3.3.1"} }

數據庫實體設計

部分表字段

功能開發要點

瀏覽?端

• 組件化，組件顆粒度盡可能小
• 直接復用 builder-webpack-geektime 的構建配置，無需關注構建腳本

服務端

• MVC 開發方式，數據庫基于 Sequelize
• Rest API 風格
• 采用 JWT 進行鑒權

JSON Web Token 工作原理

談談 Web 商城的性能優化策略

渲染優化

• 首?頁、列列表?頁、詳情?頁采?用 SSR 或者 Native 渲染
• 個人中心頁預渲染

弱網優化

• 使用離線包、PWA 等離線緩存技術

Webview 優化

• 打開 Webview 的同時并行的加載頁面數據

代碼

有部分代碼，可以參考這個：https://github.com/kaimo313/webpack-demo

總結

以上是生活随笔為你收集整理的webpack项目篇（六十六）：react 全家桶 和 webpack 开发 h5 商城项目的整体思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。