首页 > 代码库 > 前端工程化

前端工程化

2024-11-01 12:29:39   205人阅读

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

前端工程化


联系
我们