HTML5移动应用开发为什么需要引入前端工程化

左手的ㄟ右手 2022-08-08 06:46 185阅读 0赞

使用HTML5和Javascript开发的移动应用，和典型的现代Web前端项目一样，有着大量的Javascript，HTML和CSS代码，因此前端工程化在HTML5移动应用开发中同样有着重要意义，可以避免大量重复性的工作，提供效率和质量，优化产品的性能。

目前前端工程化比较通用的框架主要有国外的grunt，gulp，百度的F.I.S等，这些框架基本上都是基于Node.js实现的（百度的F.I.S最早是基于PHP开发的，后来切换到Node.js）。Node.js对前端工程师有着非常强的亲和力，有各种基于Node.js的压缩、优化、校验工具，有着极高的运行性能，有强大的npm包管理工具，这些特点让Node.js成为前端自动化和辅助开发工具的首选平台。前面我们介绍的Cordova，Ionic框架的命令行脚本程序都是基于Node.js开发的。

对于移动Web项目来说，前端网页性能的优化（主要是指各种文件的压缩处理，CDN缓存，图片质量优化）非常重要，因为现在移动上网的流量费还是很昂贵，移动带宽普遍还是达不到PC带宽的水平，4G网络还没有普及，还有很多用户会通过3G,GPRS或不稳定的WiFi网络访问我们的移动网站。如果移动网站优化的不好，用户会花很长的时间（15秒以上）才能打开网站，同时浪费大量的流量，结果就是造成用户的大量流失。

对于移动Web产品，CSS和Javascript文件的压缩和合并，静态文件的CDN缓存，文件缓存问题和文件Hash版本处理，HTML5离线缓存等工作，都是需要优化的方向。这些优化工作我们每次更新产品时都需要做，如果手工操作必然会浪费大量的人力成本，并且容易出现疏漏导致的错误，因此我们引入了一系列工具来自动化这些工作，这就是前端工程化。

对于HybridApp开发来说，我们同样需要压缩合并CSS和Javascript文件，删除不必要的文件，以便减小App安装包的文件大小，为用户节省下载的流量；另外还需要对js进行混淆，提高安全性；针对不同的平台修改相关的代码，更好的支持跨平台。这些工作都可以通过前端自动化工具完成，提供研发效率和质量。

HTML5移动应用开发和传统的Web前端开发一样，都是使用Javascript作为主要的开发语言，因此在开发javascript程序时使用的自动化脚本工具都可以使用，目前这些工具都是基于Node.js平台实现的，借助Node.js的异步非阻塞特性，与传统的shell脚本相比，这些工具非常方便。这些前端自动化工具包括Grunt，Gulp，FIS等，后面会重点介绍Gulp的应用。

更多的理由，欢迎大家讨论补充。