react-webpack-gulp-eslint自动化结构搭建以及优化

先上github地址https://github.com/YardWill/react-webpack-gulp-eslint

首先贴上README

README.png

集成功能

  • less预编译成css
  • webpack打包处理jsx文件和ES6语法
  • eslint作为代码规范,使用airbnb-react规范
  • 所有以上功能统一使用gulp自动化工具管理,只需要一个命令执行以上所用功能。
gulp.png

webpack优化

webpack.png

用过webpack的人都应该遇到过webpack打包文件过大的问题,因为webpack会将npm里面的依赖包一起打包进入一个文件,而对于前端的规范而言,这是一种不优雅的实现,类似react和react-dom这样的公共库我们可以通过webpack提取出来。

压缩后.png

但在开发环境下就不要压缩代码了,这样做既增加到时间也减少代码的可调试性,在上线的时候才对js进行压缩。
** 对于小型项目关于js的优化已经足够 **

尾巴

开发环境已经搭建了好了,而且全部自动化实现,可以直接拿去用,也希望有读者能够一起交流学习,之后还会引入react-router构建,因为目前还没有完全实现react-router分模块的异步按需下载功能,先不贴上去。之后简书上会继续更新。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 4,656评论 1 31
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 6,926评论 7 35
  • -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...
    慢清尘阅读 2,657评论 7 16
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 155,785评论 24 678
  • 哪里有压迫,哪里就有反抗。 昨天洗澡的时候,忽然想到这个问题。我们常常说谁谁非常强势,我们迫于职位的高低、权利的大...
    爱生活的折耳猫阅读 77评论 0 0