分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

webpack + react 前端工程化实践和暂不极致优化

发布时间:2023-09-06 01:40责任编辑:胡小海关键词:前端webpack

技术结构

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

webpack + react 前端工程化实践和暂不极致优化

原文地址:https://www.cnblogs.com/ivehd/p/8376004.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved