一个好的前端开发模式总结

背景

随着社会的不断进步，人们慢慢从物质消费升华到了精神消费，前端也相比原来重要了许多，如何开发好一个项目，开发意识非常重要，这时候应该如何更好的开发一个前端网站的流程尤为重要。

开发阶段

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仓库中，这样后面开发效率也会越来越高，出问题的情况越来越少

转载于:https://www.cnblogs.com/Hsong/p/11551225.html