Web前端代码构建优化

前言
本次所做的构建针对于iVMS-5200 Professional 车载 1.0项目的前端工程。在现在化Web开发情况下，越来越注重用户体验，具体包括网站的访问速度，页面的自适应，页面操作的流畅度。如何做到更快，对前端开发人员尤为重要。依据Yahoo经典的性能优化建议，包括减少HTTP请求、使用CDN、使用gzip压缩、精简CSS和JS等等，前端不仅需要再开发过程中对代码进行优化，同时需要在发布阶段对整个工程进行优化构建。在之前，前端开发人员缺少足够的后端技术，无法去开发优化工具，到了Node.js出现之后，整个前端发生了很大的变化，前端构建也就渐渐拓展开来。
车载1.0项目的前端使用requireJs来进行开发，构建工具使用npm和gulp以及gulp插件。
构建流程
1. 安装Node.js
安装地址：https://nodejs.org/en/ ，查看node.js版本信息：node –v 版本号需要高于v0.10.32
2. 安装NPM
安装node.js的同时会安装npm，但是npm的更新会多于node.js。所以需要经常更新npm，通过输入： npm install npm –g 来更新。
npm有两种安装包的方式：本地和全局。选择什么样的安装类型取决于你怎样去使用这个包。如果你想要给你自己的模块加上依赖，类似于node.js中的require，然后你就应该本地安装，这也是npm 安装的默认行为。另外，如果你想用这个包作为一个命令行的工具，类似于grunt cli，那么你就应该全局安装。
3. 安装gulp
在项目路径下执行 npm init，生成package.json文件，全局安装gulp, npm install gulp –g，作为项目的开发依赖安装：npm install gulp –save-dev ，Gulp API 路径：http://www.gulpjs.com.cn/docs/api/
4. 主要的gulp插件
插件均可以到npm官网找到。
JS：
1) gulp-concat 文件合并
2) gulp-uglify 文件压缩
3) gulp-rename 文件命名
4) amd-optimize requireJs优化
5) gulp-jshint 代码规范检查
6) gulp-requirejs 也是用于requirejs
CSS：
1) gulp-clean-css css压缩
2) autoprefixer 自动给CSS属性加上兼容性前缀，基于can I use 网站规则
图片：
1) gulp-imagemin 图片压缩
HTML:
1) gulp-file-include html中引入文件，默认引入用@@include
2) gulp-template html模板
3) gulp-useref 对html中一些script或者stylesheets进行优化
4) gulp-htmlmin HTML的压缩工具

其他：
1) gulp-sourcemaps 提供构建前源代码（js和CSS）的调试 （source map描述可见）
source map是否启动可通过chrome调试工具里面的设置
2) del 删除文件
3) yargs 用于获取启动参数，针对不同参数，切换任务执行过程时需要
4) gulp-clean清理文件
5) gulp-copy 复制文件
6) gulp-replace 将文本文件中的内容替换
7) gulp-rev 加md5后缀
8) gulp-rev-collector 把html内的文件名修改为加版本号后的文件名
9) gulp-rev-replace 替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
10) gulp-watch 当监视到文件改变时执行任务
11) gulp-notify 当gulp失败时，发送消息到系统提示中心，控制台和操作系统都有（虽然api说是windows需要8及以上，但是win7也有）
12) gulp-react
13) gulp-angular-templatecache
14) run-sequence 按顺序执行gulp任务
15) gulp-plumber gulp错误处理

1. 工程目录

2. 流程
   
   具体代码：
   见附录

3. 注意项
   1) Amd-optimize不支持package属性
   2) 注意路径问题，代码内最好都是用相对路径，config.js内的路径需要与amd-optimize定义的路径不一样
   3) Plugin文件夹里其实只需要把requireJs复制到dist中，因为其他组件已经被压缩合并到各个模块中了。
   4) Amd-optimize中moduleName的路径是基于baseUrl的。而gulp流中的路径是基于gulpfile.js的当前路径的。
   5) 设置data-main文件替换问题？最好不要写data-main，因为这样require.config就不知道放在哪了，如果data-main脚本代码的最前面，就需要每个模块都加而且必须要一致。所以最好是先引入require，然后引入config，然后引入主文件（index.js），index.js用require([deps],callback)来写，然后模块之间不要引入各模块的Index.js即可。
   6) 路由需要由前端来做，否则定义在struts里不切实际（前端只做单页面路由history api）?这个怎么解决？
   7) JSP文件需要增加request.getContextPath() 才可使用相对路径
   8) Gulp-rev的merger不管用，无法合并。暂时不用
   9) JSP?HTML? 保留JSP
   10) 需要将所有css统一放到一个路径下
   11) Source map 需要写外部map文件，否则会将source map加到源文件中的后面，增加文件长度

4. 结果
   执行过程中的打印信息：

执行之后在dist目录中情况：
JS进行了压缩合并，CSS进行了压缩，以及包含了source map信息

总结
在经过优化之后，经过开发环境和生产环境下对页面的操作以及打开页面时间的测试，页面的响应时间大体上减少了40%，操作上也更加流畅。所以对于前端项目的优化构建过程十分必要。
附录