一个经过优化的react脚手架,拿来就能开发

发布时间:2019-06-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了一个经过优化的react脚手架,拿来就能开发脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react-ve

拿来即用的 react 脚手架

没有使用create-react-app,直接走webpack显性配置,使配置透明。

脚手架是我根据大多数公司的业务,取其共同需求搭建的,并且做了项目优化,不管小项目还是大项目都可以很好的支撑。

一点建议

  • 建议使用tyPEscript开发
  • 在数据控制方面,推荐你使用ImmutableJs来控制数据,因为它和react真的是绝配
  • 页面经常会存在用户操作时出现的组件,比如通过点击出现弹框,如果弹框内容过大,推荐你使用async-loadable,它能很方便的获取按需加载的组件。
  • 在样式方面,建议公用的样式使用less直接引用在入口文件中,页面级样式使用styled-components

优化

  1. 代码丑化压缩
  2. 代码分割(code-splITting) 模板使用基于路由的动态导入
  3. 使用 DLL 将公用依赖库模块封装为一个独立文件

安装及使用

  1. npm install react-ve -g
  2. react-ve init [PRojectName]

启动项

  1. cd [projectName]
  2. yarnnpm install
  3. npm run dll
  4. npm start

在浏览器地址栏中输入:localhost:3000即可访问

项目打包,运行npm run build即可,项目将打包至dist文件夹内

默认使用技栈:
  1. react
  2. typescript
  3. antd
  4. styled-components
  5. react-router-dom
  6. immutable

你可以根据喜好来installuninstall它们。


建议:

项目公共样式(包括antd、框架、装饰页)使用less,页面级样式采@H_512_125@用styled-components,以止样式污染。


DLL :

webpack.dll.@R_406_1058@.babel.js中,默认打包的公共包包括:

entry: {
    vendor: ['react', 'react-dom', 'antd', 'react-router-dom', 'immutable']
  }

你可以根据自己的喜好做删减

脚本宝典总结

以上是脚本宝典为你收集整理的一个经过优化的react脚手架,拿来就能开发全部内容,希望文章能够帮你解决一个经过优化的react脚手架,拿来就能开发所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。