前端工程化，升级版的合并压缩。一般是用nodeJs开发命令行工具。什么是前端工程化？

 

来自阿里的前端专家石破

既然聊到了工程化一词，那什么是工程化？我个人理解工程化是把经验技巧、个人知识流程化、规范化，建立一个可重复创造优秀产品的最优环境。

 

前端工程化要解决一系列问题。这里将处理Js、css、imgs的过程称为编译。

 

合并

哪几个js合并成一个js？合并规则是通过配置方式，还是通过规范调用方式？

 

压缩

开发时用未压缩，线上用压缩后；线上能方便调试bug

 

前端模块化

压缩后的文件，还要继续符合AMD、CMD规范，requireJs在边写Js时边编译，浏览器只能执行处理后Js。

 

将脚本放在底部，将样式表放在头部

工程化开发时，一个页面分属多个模板，很难做到将所有的css放在head，js放在body闭合标签处。当工程化和性能优化出现矛盾时，单纯的工具已经不能解决问题，就需要定义规范，比如通过让后台实现自定义标签。

 

避免重复引入脚本、样式表

 

资源重定位

要发布的前端资源文件夹结构能随意调整，可为不同的资源分配到不同的静态服务

 

刷新缓存

传统的时间戳方式存在2个问题；

1）改了时间戳，不管资源有没有变动，所有的资源都要重新获取。

2）不管先更新静态服务，还是先更新应用服务，都存在问题。

文章末尾，有前百度前端fis团队负责人张云龙相关博文。

其中一种好的解决方法，是在编译过程中，根据文件内容生成MD5文件名。

 

 

执行时加载

页面一些特效Js在页面初始化时不需要下载，在应用特效时，才去下载，require.async，比如

require.async('dialog.js', function(dialog){ dialog.show('you catch me!'); });

由于为刷新缓存，文件名都md5化，如果正常找dialog.js是找不到的，将md5化的前后名字输出到html中，就能解决，这也需要工程支持。

 

自动部署

改了一个静态资源能及时在服务上生效，一个命令更新到测试环境，线上环境。可以加入权限控制，先提交到svn，再更新服务环境。

简化发包流程、发补丁流程。

综上所述，前端工程化不仅做出一个命令行工具，为了达到一些性能优化目标，必须结合工程的手段，需后台提供支持。

 

支持扩展

Js支持CoffeeScript、CSS支持SASS、css sprites、模板预编译

 

参考