前端工程化,升级版的合并压缩。一般是用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、模板预编译
参考