一个好的前端开发模式总结
背景
随着社会的不断进步，人们慢慢从物质消费升华到了精神消费，前端也相比原来重要了许多，如何开发好一个项目，开发意识非常重要，这时候应该如何更好的开发一个前端网站的流程尤为重要。
开发阶段
1.根据公司实际情况选择框架技术
前端现在比较主流的三大框架自行选择。
例如react+webpack+es6+dva
webpack:模块打包，处理jsx、less、image、热更新、按需加载、各个完善的打包插件,打包方式按自己需求配置（分包、压缩等等）将项目运行速度提升，优化空间很大
react:虚拟dom，减少DOM操作，虚拟dom算法可以比较数据变化的情况进行更新，将渲染速度达到最高，setState绑定数据，开发效率更高，更好的进行组件开发
es6:前端书写代码更加方便，提供了很多方便的函数操作数据，以更少的代码做更多的事（对象合并，数据读取，循环遍历等等），大部分浏览器已经兼容，babel也可以将es6代码编译成es5
dva:基于Redux的前端应用开发框架，可以省去很多redux的代码，能够非常简单的实现异步交互以及全局数据流
2. 提取公用组件（查询组件，新增编辑组件、富文本编辑组件、面包屑等等）
公用组件在项目中开发非常重要，要时刻具备组件化的意识，可以借鉴
组件开发方案以及前端组件化开发方向
- 针对经常会使用的组件提取成公用组件
- 组件化开发要具备开发的意识，怎么写出一个较好维护的前端组件
- 如何管理开发的组件，可以使用npm上传到npm仓库，方便统一的维护以及管理，可以借鉴react组件发布到npm
3. 提取公用函数
项目中可以复用很多的公用函数（正则表达式验证、获取url，数组的操作等等），可以将他们提取出来，封装成公用函数库，拿来使用，也可以上传到npm库进行管理，其余的开发者也可以更方便的使用
- 方便维护
- 提升自己的开发效率
- 可以不断迭代更多好用的函数
4.css模块化开发
怎么实现css模块化，css模块化
- 可以让命名更加规范，多人开发出现的问题更少
- 提高代码重用率
- 提高开发效率
- 公用的css可以提取出来放置到cdn加载
后续优化
静态资源可以走cdn
- 多域名加载资源
- 文件可能已经被加载过并保存有缓存
- 有效防止网站被攻击
webpack打包优化
- HappyPack优化
- CommonsChunk分包，抽离公共依赖
- DllPlugin进行打包优化
- ExtractTextPlugin分离css
- UglifyJsPlugin压缩代码
- gzip压缩
总结：
前端开发时刻都要具备组件化开发的意识，公用的代码块以及函数块，样式表都可以放置到npm仓库中，这样后面开发效率也会越来越高，出问题的情况越来越少
