如何构建前端代码

基本认识

开发环境和线上环境的区别

在好久之前，前端的部署其实比较简单，开发环境下，静态资源往服务器上面一扔就ok了，若是考虑下优化或者代码保护，也只是加一个代码压缩和混淆。没错，刚入行的时候我就是这么干的。。。

可是随着前端复杂度的发展，上面的作法已经没法知足需求了，特别是AMD,CMD概念的引入，打包合并就变成一项基本工做了。

举一个requirejs的例子，在一个复杂点的前端系统中，你能想象不打包直接上线吗，那样换来的可能就是打开首页就须要download几十个甚至上百个模块资源，这种行为是对网络资源的一种无谓消耗。因此对应requirejs有个r.js，就是专门消灭这种无谓请求消耗的，它作的事情也比较简单，按照必定规则，把各类模块合并成一个，这样在上线是一次请求就能download须要的全部js。

开发环境代码和线上代码区别

首先你们能够在构建时取消相似压缩，混淆这几部，能够观察下，构建完成后的代码，会和开发时你所写的有差异，开发环境的代码都通过了编译处理，根据必定的规则从新编译过。

举一个例子，咱们在使用css3时，若是去本身写样式去适配chorme,safari,opera等等会累死。可是咱们按照一个规则写一个，在构建时，代码自动作补全，是否是就很方便，能提升很多效率。

再举个例子，如今比较前沿的已经在开发环境下使用ES6了，可是想要在浏览器端直接运行还须要一段日子，可是没事，咱们有Babel之类的工具，能够在编译时实现ES6到ES5的代码转换。这种用法我尚未用过，可是经过构建，咱们能够用于尝试一些新的东西。提早作一些技术积累。

前端工程化核心环节

从前面两点你们应该能看出构建这一步的重要性了吧，能够说须要作到前端工程化，提升开发效率等，构建编译这一个步骤绝对是核心步骤之一。他的角色不逊色于搭建service，项目脚手架等等

具体举例

百度前端不只有个fis（前端集成解决方案），还有一个edp，也是一个前端集成解决方法，主要是百度商业体系的前端在使用。
因为咱们一直在使用edp，因此下面用edp举例去了解下前端构建

下面介绍一下咱们本身系统中的一些使用

1. 首先是js模块的合并，咱们会按照首屏加载和能够懒加载的功能划分，将模块合并成总体，这样就避免了散文件的出现。首先散文件是有害处的，第一是，散文件可能没有版本号的区分，这样由于缓存致使bug；第二是散文件会严重拖慢性能，由于不少散文件不只消耗请求资源，并且是在串行消耗。

2. 将js用到的模板的合并，目的也是减小无谓的请求。

3. 将less转换成css进行合并

4. 将js文件压缩处理

5. 将合并后的文件进行加上文件MD5版本号处理，MD5的目的就是基于文件内容解析出版本号，这样若是某个模块没有变动过，能够一直使用缓存，提升性能。

6. 将合并后而且包含MD5的文件的path更新到首页html的require的config中

7. 修改文件引用对应的path，由于相似于js引用的模板和css都须要更新到打包合并的path上

8. 清理输出时的无用文件

9. 添加版权信息等等

上面是一个基本流程，若是有特殊的需求，能够继续添加处理模块。
例如想引入reactjs，若是是构建时打包的话，咱们确定不但愿上线的代码里面有一个browser.min.js文件，这样不只增长了静态资源，并且增长了一个jsx翻译处理。那么咱们能够在构建时增长一个jsx2js的步骤，这样就达到了，开发使用jsx，可是发布上线时，自动处理成了js代码。

关于性能优化

这种构建处理，我理解出发点都是从性能角度考虑的。
对于一线的业务开发过程，咱们指望的是高效的开发业务，并不能把性能等等要求强加到业务开发中，否则咱们业务开发是低效的，并且，随着性能优化策略的变动，咱们没法随意的在业务中修改代码及时配合，就算是有人力修改，也可能致使bug。
因此将构建和业务解耦也是很关键的，只要业务开发符合某个规范，咱们能够根据性能优化的点随时更新优化策略，构建代码的差异也是仅仅体如今性能上，而不会延生到业务中。

注意事项

你们能够看看前面几篇文章《如何避免工程效率陷阱》，《如何在大公司中成长》咱们在拥抱前端工程化时，不要停留在使用阶段，也须要花点时间研究下原理，否则就很容易被工程了，由于你要相信将来前端的工程化只会让你的业务开发更加简单，关心的东西更少。

我的博客：http://tangguangyao.github.io/