webpack + react 前端工程化实践和暂不极致优化
技术结构
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 前端工程化实践和暂不极致优化的更多相关文章
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 中的遗留问题:webpack将如何处理按需加载的 ...
- 阿里云无线&前端团队是如何基于webpack实现前端工程化的
背景 前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,ang ...
- 基于webpack的前端工程化开发解决方案探索(三):webpack-dev-server
前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
随机推荐
- vue-cli项目里npm安装font-awesome
第一步:进入到项目目录里,运行 cnpm i font-awesome -s 第二步:在main.js里面 import 'font-awesome/css/font-awesome.min.css'
- QT启动一个工程
功能描述: 模拟如下页面. 当输入一个字符串时打开对应的应用程序. 实现方法: 1. 建立工程 2. 界面编辑: 3. 在test1.h中添加slot声明 4. test1.cpp中添加slot定义 ...
- 算法(13)Contiguous Array
题目:找出数组的一个子数组,要求这个子数组中0和1的数量相等,找出最大长度的这样的数组! 思路:也是受网上算法的启发吧,用一个 语言:如何初始化一个unordered_map<int,int&g ...
- RadioGroup 的使用
//获取 RadioGroup 项目名称 procedure TForm1.RadioGroup1Click(Sender: TObject); begin Text := RadioGroup1 ...
- Redis使用手册
简介 Redis 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型. Key-Value数据库. Redis面向互联网的方案提供了三种形式: 1.主从 主机进行写操作, ...
- 2018宁夏邀请赛K Vertex Covers
题目链接:https://nanti.jisuanke.com/t/28411 题意: 给出n(n<=36)个点的一个图.求点覆盖集数. 题解: 将n个点折半为L和R两部分.对于R内部的边,枚举 ...
- bootstrap和bootstrap-select去除蓝色边框outline
/*bootstrap outline设置*/ .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.fo ...
- 【ZJ选讲·压缩】
给一个由小写字母组成的字符串(len<=50) 我们可以用一种简单的方法来压缩其中的重复信息. 用M,R两个大写字母表示压缩信息 M标记重复串的开始, R表示后面的一段字符串重复从上一个 ...
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) B
B. Problems for Round time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- [poj 3693]后缀数组+出现次数最多的重复子串
题目链接:http://poj.org/problem?id=3693 枚举长度L,看长度为L的子串最多能重复出现几次,首先,能出现1次是肯定的,然后看是否能出现两次及以上.由抽屉原理,这个子串出现次 ...