webpack项目篇(六十六):react 全家桶 和 webpack 开发 h5 商城项目的整体思路

简介: webpack项目篇(六十六):react 全家桶 和 webpack 开发 h5 商城项目的整体思路

说明

玩转 webpack 学习笔记



商城技术栈选型

前端:

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

后端:

  • koa + mysql + sequelize



商城架构设计

image.png

商城界面 UI 设计

f4d74960d38e465598ad9367d7079ef7.png


React 全家桶环境搭建


1、初始化项目

npm init -y


2、创建项目目录

创建 actions、reducers、store 等


  • src/actions/ 放置所有的 actions
  • src/reducers 放置所有的 reducers
  • 使用 Provider 传递 store,Store 通过 Provider 传递给容器组件


0958100c07674f548ae15c6980406d54.png


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"
  }
}



数据库实体设计

部分表字段


5cb6f995ffc74ee0a2cf5d5cf1d5d57b.png



功能开发要点


浏览器端


  • 组件化,组件颗粒度尽可能小
  • 直接复用 builder-webpack-geektime 的构建配置,无需关注构建脚本

服务端

  • MVC 开发方式,数据库基于 Sequelize
  • Rest API 风格
  • 采用 JWT 进行鉴权


JSON Web Token 工作原理

a87e4e9f11c3402dbe581fa8a9e0c71e.png




谈谈 Web 商城的性能优化策略

渲染优化


  • 首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染
  • 个人中心页预渲染

弱网优化

  • 使用离线包、PWA 等离线缓存技术

Webview 优化

  • 打开 Webview 的同时并行的加载页面数据



代码

有部分代码,可以参考这个:https://github.com/kaimo313/webpack-demo


d0d25ba060b14b7d8f12d69ab06db954.png











目录
相关文章
|
4月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
184 4
React开发需要了解的10个库
|
3月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
4月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
89 4
|
4月前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
132 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
5月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
5月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
6月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
64 1
|
6月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
71 0
|
6月前
|
前端开发 JavaScript Android开发
React Native 快速入门简直太棒啦!构建跨平台移动应用的捷径,带你开启高效开发之旅!
【8月更文挑战第31天】React Native凭借其跨平台特性、丰富的生态系统及优异性能,成为移动应用开发的热门选择。它允许使用JavaScript和React语法编写一次代码即可在iOS和Android上运行,显著提升开发效率。此外,基于React框架的组件化开发模式使得代码更加易于维护与复用,加之活跃的社区支持与第三方库资源,加速了应用开发流程。尽管作为跨平台框架,React Native在性能上却不输原生应用,支持原生代码优化以实现高效渲染与功能定制。对于开发者而言,React Native简化了移动应用开发流程,是快速构建高质量应用的理想之选。
120 0
|
6月前
|
前端开发 API 开发者
【前端数据革命】React与GraphQL协同工作:从理论到实践全面解析现代前端数据获取的新范式,开启高效开发之旅!
【8月更文挑战第31天】本文通过具体代码示例,介绍了如何利用 GraphQL 和 React 搭建高效的前端数据获取系统。GraphQL 作为一种新型数据查询语言,能精准获取所需数据、提供强大的类型系统、统一的 API 入口及实时数据订阅功能,有效解决了 RESTful API 在复杂前端应用中遇到的问题。通过集成 Apollo Client,React 应用能轻松实现数据查询与实时更新,大幅提升性能与用户体验。文章详细讲解了从安装配置到查询订阅的全过程,并分享了实践心得,适合各层次前端开发者学习参考。
54 0