前端技术选型，react, vue , angular2 技术对比

一个项目的开始，往往需要进行技术选型，也是头疼的时候。以下为前端的选型的考虑，给大家提供一个选型思路。

前端技术选型

框架：react, vue , angular2 技术对比

react

• 优点：小型,专注于view 视图; 社区活跃; React 支持 IE8;
• 缺点：并不是一个完整的框架，只是一个类库; 学习难度大; 使用jsx 语法(推荐的做法是 JSX + inline style), 导致可维护性差; 需要编译环境; 修改开源协议（目前MIT）;
  

vue

• 优点：学习难度小; 轻量级,专注于view 视图; 不需要编译（如果使用vue脚手架开发单页应用，还是需要编译和构建环境）,快速开发; 适用于快速开发小型项目;
• 缺点：不是一个完整的框架; 对于大型项目可维护性差;

angular4

• 优点：项目模块块化三者中做的最好; 测试更加友好; 配合typescript强类型语言可维护性更高; 更适合大型项目; 完整的框架,一站式服务; 面向web标准; 使用依赖注入将 业务逻辑和UI进行隔离;
• 缺点：学习难度大; 需要编译环境; build包太大，导致首屏渲染慢;

以下表格为react, vue , angular4 技术对比：

详细列表：

通过种种对比，以及通过组内成员会议讨论，商量，投票，最终考虑使用angular进行开发。

以下选型为基于angular框架其他技术选型，以及开发中的技术难点预测，测试。

基于angular的ui组件： bootstrap, primeng, weiui 组件库对比

• bootstrap
• 优点：以css 为核心，提供一套扁平化 css 通用样式，组件; 响应式，兼容PC 端，移动端;
• 缺点：组件少; 不适用于纯移动端;
• primeng
• 优点：基于angular的组件库; 组件全面; 响应式，兼容PC端，移动端;
• 缺点：组件不够细致，不适用于纯移动端项目;
• angular版weui
• 优点：基于angular的组件库; 移动端组件全面; 适用于微信项目; 微信官方设计UI组件库; 小巧;
• 缺点：只适用于移动端;

选型建议： angular + weui

项目难点

首屏渲染慢

angular 框架文件太大导致单页应用首屏渲染太慢解决方案：

1. 所有模块按需加载;
2. 精简项目依赖;
3. build 生产版本;
4. 服务器启动gzip压缩;

优化测试结果（测试时，前端只开发了首页模块）

以上测试结果表明，完全可以解决文件太大导致首屏渲染太慢的问题。

项目优化

• 项目为生产版本， 启动gzip 压缩，最大限度的加速项目加载速度; 具体查看项目 难点，首屏渲染慢 的优化方案;
• 使用浏览器缓存;
• 使用浏览器性能调试，对代码进行优化;
• 对项目的用户体验进行优化;

项目部署

1. 项目部署可以选择使用tomcat部署，前端代码和后端代码都部署到同一个tomcat中。
2. 项目部署还可以选择使用nginx做为前端服务器， 后端使用tomcat服务器， 前后端分开部署。