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) 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加到源文件中的后面，增加文件长度

结果

执行过程中的打印信息：

执行之后在dist目录中情况：

JS进行了压缩合并，CSS进行了压缩，以及包含了source map信息

总结

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

附录