实战录 | 浅谈前端项目构建与优化

《实战录》导语

云端卫士的新栏目《实战录》将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验，希望对于热爱技术且关注安全领域的受众有所裨益。本期分享人为云端卫士安全运营工程师林璐，将带来前端项目构建与优化的分享。

不得不说的废话

目前web应用的日益复杂，它们功能完善，界面繁多，还需要为用户提供完整的产品体验，可能是在线购物平台，可能是社交网络，可能是金融APP，也可能是视频直播平台……如果采用非常原始的“切图（FE）->套模板（RD）”的开发模式，效率会非常低下。为了提高编码->测试->维护工作效率，做好项目构建很重要。

项目构建优化

  可以从两个方面来简单介绍下项目构建工程化：开发与发布。从开发角度，要解决下面问题：项目构建优化1.制定开发规范；
2.模块化开发。
从发布角度，要解决下面问题：
1.代码检查；
2.预编译文件，es6-es5,less-css；
3.依赖打包，例如上面的依赖模块，功用组件，减少http请求数量；
4.文件合并压缩，减小文件体积；
5.文件发布序列化，通过给文件名加入MD5以应对浏览器缓存引起的静态资源更新问题；
6.代码测试，mock等方式；
7.文件监听以及资源定位于映射,方便开发调试；

开发方面：

涉及到的主要是模块化开发与组件化开发，项目不同以及选择框架不同，代码结构也会不一样。以下图为例，UI组件里面会有我们通用的功能小块，比如tab、table、button、grid等，可以兼容移动端和PC端，做通用组件。借助html5与css3，满足追求效果的需求。这些可视、可交互的组件可以作为静态资源，异步加载到不同的使用场景中。

JS模块化方案有很多，AMD/CommonJS/UMD/ES6 Module等，结合到我们使用的框架，提取不同页面中的通用样式，如公用颜色、图标、按钮等，实现一些基本元素的复用，js方面可以提取公用功能模块，如常用功能函数等，实现部分公用模块的复用。

发布方面：

NODE.JS是现代工业化前端的基础，从上面图中可以看到2015年包数量示意图，基于node的模块日益增长，也正是得益node社区繁荣，我们才有了更多工具去选择，适合项目的技术。其中Grunt与gulp是比较流行的两款前端构建工具，相比之下，Grunt有频繁的IO操作读写，gulp是将项目任务流程以streaming（流）的形式来做管道化处理，例如：

读取A → A.a() → 写A  → 读取A → A.b() → 写A  → 读取A → A.c() → 写A  → complete/watch...
gulp是这么处理的：

读取A并转为流信息 → A.a() → A.b()  → A.c() → 写A  → complete/watch...。

由于gulp流式管道化处理，配置写法非常简洁，只需要一份 gulpfile.js 即可。以常见的dist任务为例，将任务拆分为：

1.删除开发目录dev， clean-dev
2.删除发布目录dist， clean-dist
3.合图并修改css中图片引用， sprite
4.预编译css（如sass）到dev， compile-css
5.预编译js到dev， compile-js
6.从src拷贝html到dev， copy-html
7.对dev下面的js/css进行md5，再拷贝到dist， reversion
8.替换dev下html中js/css进行过md5之后的文件路径，并拷贝到dist， replcae

借助run-sequence等第三方模块，通过task任务执行编译：

gulp.task('clean-dev',function(){ // TODO});
gulp.task('clean-dist',function(){ // TODO});
gulp.task('sprite',function(){ // TODO});
gulp.task('compile-css',function(){ // TODO});
gulp.task('compile-js',function(){ // TODO});
gulp.task('copy-html',function(){ // TODO});
gulp.task('reversion',function(){ // TODO});
gulp.task('replcae',function(){ // TODO});

结语

前端工程其实是一个很大的话题，选型技术、制定规范、优化性能等等都很重要，针对不同的项目，解决方案也不一样。LESS IS MORE，怎样从复杂的逻辑、需求中，找到最简单、最适合项目的解决方式，最简单的技术选择，才是最重要的。