京东前端工程化和静态资源管理全面总结.docx

京东前端工程化和静态资源管理全面总结随着互联网的发展，我们的业务也日益变得更加复杂且多样化起来，前端工程师也不再只是做简单的页面开发这么简单，我们需要面对的十分复杂的系统性问题，例如，业务愈来愈复杂，我们要如何清晰地梳理；团队人员愈来愈多，我们要如何更好地进行团队协作；功能愈来愈多，我们要如何保证页面的性能不至于下降，等等。所有的这些都可以归结为如何提升开发体验和性能问题。提升开发体验我们主要从以下三个方面来提升我们的开发体验。规范化当团队人员不断扩充时，我们需要制定统一的规范来对平时的开发工作做出一定约束和指导。统一的规范包括前端的代码规范，根据规范定义好一套代码检查的规则，在代码提交的时候进行检查，让开发人员知道自己的代码情况。同时，根据以往的开发经验，我们制定了统一的项目框架，根据业务功能不同，将一个项目(app)拆分成不同的业务模块(module)，而每一个模块都包含自身的页面(page)以及构成页面所需要的组件(widget)，每一个项目涉及到app、module、page、widget这些已经约定好的概念，这样让项目结构更加清晰，而且让团队内不同业务的人员之间切换无障碍。组件化在项目中引入组件化的概念，这里的组件对应上文讲到的widget，每一个组件都会包含组件自身的模板、css、js、图片以及说明文件，我们使用组件来拼装页面，像搭积木一样来拼装我们的页面，同时一个组件内可以调用另一个组件。在拿到设计稿后，我们首先需要确定哪些需要做成公共组件，那些是要做成独立组件，以及组件间如何进行通信。在页面中调用这些组件后，会自动加载组件的模板以及组件的静态资源，而当组件不再需要时，只要移除掉组件引用，那么相应的模板和静态资源也会不再加载。组件化的好处主要有这么几点管理方便，我们可以把一个独立功能相关的文件在工程目录中放在一起，这样代码管理起来会非常便利组件复用，通过抽取公共组件，可以实现组件复用，从而减少工作量，创造价值分而治之，这是组件化最重要的一点，将页面组件化，就是对页面功能的拆分，将一个大的工程拆成小的零件，我们只需要关注每一个零件的功能，极大地降低了页面的开发与维护的难度自动化编译在前端开发中，我们总是会去使用很多工具、手段来优化代码、提升开发效率，例如，我们会使用sass、less等CSS预处理工具来编写更好维护的样式代码，我们也会使用CSSLint、eslint等代码检查工具来检查代码的语法错误，使用文件合并压缩等手段来减少资源大小，除此之外我们还会去做雪碧图合并、多倍图处理、字体压缩处理、代码发布等等。曾经有大神说过，超过90s的工作都应该自动化掉。而以上所有的这些工作，贯穿我们整个开发流程，但是不同工具的切换不但显得凌乱，而且影响开发效率。在自动化、工程编译的思想早已深入人心的当下，我们当然也要紧跟潮流，所以我们考虑通过自动化手段来提升我们的效率，让所有操作可以一键式开速执行完。我们将通过定义好一系列的编译任务，按照一定顺序依次对我们的项目自动进行编译操作，最后产生出可上线的代码。提升性能我们主要从以下四个方面来做好性能优化。首屏优化页面的打开速度一直是大家非常关心的一个指标，一个页面打开太慢会让让用户失去等待的耐心，为了让用户更快地看到页面，我们考虑将页面中部分静态资源代码直接嵌入页面中，我们通过工具处理，在工程编译阶段，将指定的静态资源代码内嵌入页面中，这样可以减少HTTP请求，提升首屏加载速度，同时降低页面裸奔风险。按需加载同时，我们考虑通过尽量减小页面体积来提升页面打开速度，在业务上我们将页面划分为一个个楼层组件，以京东美妆馆为例，页面中从上而下分为首焦、至IN尖货、今日特惠、潮流前沿、口碑榜单这么几个楼层组件，其实这个页面还有很长，内容非常多且复杂。之前我们的做法是整个页面直出，这样一次性加载的内容会非常多，为了提升打开速度，我们考虑通过按需加载的方式来优化页面的加载。我们在页面中只放每一个楼层的框架性代码，楼层的模板和数据都通过异步的方式去拉取，来实现楼层组件的按需加载，同时我们可以对模板以及数据进行缓存，以此来减少请求，做更极致的优化。在开发中我们以正常组件的方式去开发整个页面，随后通过编译工具，在代码编译阶段自动将楼层的模板抽离成一个独立的JS文件，并给楼层容器打上标记位，通过页面加载逻辑去按需拉取模板，再进行渲染。通过给楼层容器和模板分别加上标记位?o2-out-tpl-wrapper?o2-out-tpl在编译时自动将指定的模板代码抽离成独立js文件并且给楼层容器打上标记同时在逻辑脚本适当位置自动加入模板的版本通过上述步骤，实现按需加载的自动化生成，在提升性能的同时，很好地解放我们生产力。基于资源表加载根据页面组件化，通过工具分析，我们将获得页面与组件的依赖关系表，同时也能确认页面所引用