一个项目的开始，往往需要进行技术选型，也是头疼的时候。以下为前端的选型的考虑，给大家提供一个选型思路。
前端技术选型
框架：react, vue , angular2 技术对比
react
- 优点：小型,专注于view 视图; 社区活跃; React 支持 IE8;
- 缺点：并不是一个完整的框架，只是一个类库; 学习难度大; 使用jsx 语法(推荐的做法是 JSX + inline style), 导致可维护性差; 需要编译环境; 修改开源协议（目前MIT）;
vue
- 优点：学习难度小; 轻量级,专注于view 视图; 不需要编译（如果使用vue脚手架开发单页应用，还是需要编译和构建环境）,快速开发; 适用于快速开发小型项目;
- 缺点：不是一个完整的框架; 对于大型项目可维护性差;
angular4
- 优点：项目模块块化三者中做的最好; 测试更加友好; 配合typescript强类型语言可维护性更高; 更适合大型项目; 完整的框架,一站式服务; 面向web标准; 使用依赖注入将 业务逻辑和UI进行隔离;
- 缺点：学习难度大; 需要编译环境; build包太大，导致首屏渲染慢;
以下表格为react, vue , angular4 技术对比：
详细列表：
| angular2 | vue | react | |
|---|---|---|---|
| 定义 | MVC framework | MVC framework | javascript library |
| 发布时间 | 2016/9 | 2014 | 2013 |
| GitHub Start | 28913 | 70846 | 78821 |
| 强大的社区 | 是 | 否 | 是 |
| 学习难度 | 一般 | 容易 | 难 |
| 大小 | 566K | 58.8K | 139K |
| 编码速度 | 一般 | 快 | 快 |
| 代码复用 | 是 | 是 | 只有css |
| 代码重构 | 容易 | 难 | 难 |
| 后期维护 | 容易 | 一般 | 难 |
通过种种对比，以及通过组内成员会议讨论，商量，投票，最终考虑使用angular进行开发。
以下选型为基于angular框架其他技术选型，以及开发中的技术难点预测，测试。
基于angular的ui组件： bootstrap, primeng, weiui 组件库对比
- bootstrap
- 优点：以css 为核心，提供一套扁平化 css 通用样式，组件; 响应式，兼容PC 端，移动端;
- 缺点：组件少; 不适用于纯移动端;
- primeng
- 优点：基于angular的组件库; 组件全面; 响应式，兼容PC端，移动端;
- 缺点：组件不够细致，不适用于纯移动端项目;
- angular版weui
- 优点：基于angular的组件库; 移动端组件全面; 适用于微信项目; 微信官方设计UI组件库; 小巧;
- 缺点：只适用于移动端;
选型建议： angular + weui
项目难点
首屏渲染慢
angular 框架文件太大导致单页应用首屏渲染太慢解决方案：
- 所有模块按需加载;
- 精简项目依赖;
- build 生产版本;
- 服务器启动gzip压缩;
优化测试结果（测试时，前端只开发了首页模块）
| 优化方案 | 文件大小1 | 文件大小2 | 文件大小3 |
|---|---|---|---|
| build:dev | (vendor.js) 3.2M | (main.js) 735k | (polyfills.js) 212k |
| build:prod | (vendor.js) 624k | (main.js) 270k | (polyfills.js) 192k |
| tomcat启动gizp压缩 | (vendor.js) 156k | (main.js) 52.6k | (polyfills.js) 21k |
以上测试结果表明，完全可以解决文件太大导致首屏渲染太慢的问题。
项目优化
- 项目为生产版本， 启动gzip 压缩，最大限度的加速项目加载速度; 具体查看项目 难点，首屏渲染慢 的优化方案;
- 使用浏览器缓存;
- 使用浏览器性能调试，对代码进行优化;
- 对项目的用户体验进行优化;
项目部署
- 项目部署可以选择使用tomcat部署，前端代码和后端代码都部署到同一个tomcat中。
- 项目部署还可以选择使用nginx做为前端服务器， 后端使用tomcat服务器， 前后端分开部署。
网友评论