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

《实战录》导语

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

不得不说的废话

目前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，怎样从复杂的逻辑、需求中，找到最简单、最适合项目的解决方式，最简单的技术选择，才是最重要的。

实战录 | 浅谈前端项目构建与优化相关推荐

浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读前端自动化构建基本介绍一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
2022浅谈前端八大UI库
之前在3月份的时候做过一个<浅谈前端八大UI库>的公开课,反馈还不错,当时就想着等有时间了,就把公开课讲的东西,组织成一个博客.这一等,就等了两个多月. 先说一下什么样的同学适合看这个博客 ...
java 定时任务怎么关闭_浅谈springboot项目中定时任务如何优雅退出
在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生 ...
浅谈前端路由原理hash和history
浅谈前端路由原理hash和history
浅谈MAXIMO项目实施（转）
浅谈MAXIMO项目实施工作以来,参与了XX公司的MAXIMO项目实施,妄谈一些工作中的感受和对MAXIMO的理解,欢迎砖头. [b]对MAXIMO的理解[/b] MAXIMO是老外的软件,是J2E ...
浅谈下二级域名做网站优化的利与弊！
不要说认不清二级域名与一级域名,好吧我在重复再重复的解释下 zibk.cn 这种是属于一级域名也叫做主域,而 www.zibk.cn 这种则为二级域名,一级域名只能解析一个,二级域名则可以无穷个,在 ...
阿里浅谈大型项目前端架构设计
1.综合我在2年之前,写过一篇中小型项目的前端架构浅谈. 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了. 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发 ...
前端类名优秀命名例子_这是一篇需要花费你15分钟阅读的干货！浅谈前端工程化...
01前端工程化的背景随着业务的扩展.业务需求更加复杂.项目团队的壮大以及项目的增多等.制定一套适用于团队的前端工程化方案很有必要. 02前端工程化是什么前端工程化是一个很广泛的话题.涉及的技术与解 ...

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

实战录 | 浅谈前端项目构建与优化相关推荐

最新文章

热门文章