基础熟悉
开辟环境和线上环境的辨别
在很久以前，前端的布置实在比较简朴，开辟环境下，静态资本往服务器上面一扔就ok了，假如斟酌下优化或许代码庇护，也只是加一个代码紧缩和殽杂。没错，刚入行的时刻我就是这么干的。。。
然则跟着前端复杂度的生长，上面的做法已没法满足需求了，特别是AMD,CMD观点的引入，打包兼并就变成一项基础工作了。
举一个requirejs的例子，在一个复杂点的前端系统中，你能设想不打包直接上线吗，那样换来的能够就是翻开首页就须要download几十个以至上百个模块资本，这类行动是对网络资本的一种无谓斲丧。所以对应requirejs有个r.js，就是特地祛除这类无谓请求斲丧的，它做的事变也比较简朴，依据一定划定规矩，把种种模块兼并成一个，如许在上线是一次请求就能够download须要的一切js。
开辟环境代码和线上代码辨别
起首人人能够在构建时作废相似紧缩，殽杂这几部，能够视察下，构建完成后的代码，会和开辟时你所写的有差异，开辟环境的代码都经过了编译处置惩罚，依据一定的划定规矩从新编译过。
举一个例子，我们在运用css3时，假如去本身写款式去适配chorme,safari,opera等等会累死。然则我们依据一个划定规矩写一个，在构建时，代码自动做补全，是否是就很轻易，能进步不少效力。
再举个例子，如今比较前沿的已在开辟环境下运用ES6了，然则想要在浏览器端直接运转还须要一段日子，然则没事，我们有Babel之类的东西，能够在编译时完成ES6到ES5的代码转换。这类用法我还没有用过，然则经由历程构建，我们能够用于尝试一些新的东西。提早做一些手艺积聚。
前端工程化中心环节
从前面两点人人应该能看出构建这一步的重要性了吧，能够说须要做到前端工程化，进步开辟效力等，构建编译这一个步骤相对是中心步骤之一。他的角色不减色于搭建service，项目脚手架等等
详细举例
百度前端不仅有个fis（前端集成解决方案），另有一个edp，也是一个前端集成解决方法，主如果百度贸易系统的前端在运用。
由于我们一向在运用edp，所以下面用edp举例去了解下前端构建
下面引见一下我们本身系统中的一些运用
起首是js模块的兼并，我们会依据首屏加载和能够懒加载的功用分别，将模块兼并成团体，如许就防止了散文件的涌现。起首散文件是有坏处的，第一是，散文件能够没有版本号的辨别，如许由于缓存致使bug；第二是散文件会严峻拖慢机能，由于许多散文件不仅斲丧请求资本，而且是在串行斲丧。
将js用到的模板的兼并，目标也是削减无谓的请求。
将less转换成css举行兼并
将js文件紧缩处置惩罚
将兼并后的文件举行加上文件MD5版本号处置惩罚，MD5的目标就是基于文件内容剖析出书本号，如许假如某个模块没有变动过，能够一向运用缓存，进步机能。
将兼并后而且包括MD5的文件的path更新到首页html的require的config中
修正文件援用对应的path，由于相似于js援用的模板和css都须要更新到打包兼并的path上
清算输出时的无用文件
增添版权信息等等
上面是一个基础流程，假如有特别的需求，能够继承增添处置惩罚模块。
比方想引入reactjs，假如是构建时打包的话，我们一定不愿望上线的代码内里有一个browser.min.js文件，如许不仅增添了静态资本，而且增添了一个jsx翻译处置惩罚。那末我们能够在构建时增添一个jsx2js的步骤，如许就达到了，开辟运用jsx，然则宣布上线时，自动处置惩罚成了js代码。
关于机能优化
这类构建处置惩罚，我明白起点都是从机能角度斟酌的。
关于一线的营业开辟历程，我们希冀的是高效的开辟营业，并不能把机能等等请求强加到营业开辟中，不然我们营业开辟是低效的，而且，跟着机能优化战略的变动，我们没法随便的在营业中修正代码实时合营，就算是有人力修正，也能够致使bug。
所以将构建和营业解耦也是很症结的，只需营业开辟相符某个范例，我们能够依据机能优化的点随时更新优化战略，构建代码的差异也是仅仅体如今机能上，而不会延生到营业中。
注意事项
人人能够看看前面几篇文章《怎样防止工程效力圈套》，《怎样在大公司中生长》我们在拥抱前端工程化时，不要停留在运用阶段，也须要花点时候研讨下道理，不然就很轻易被工程了，由于你要置信将来前端的工程化只会让你的营业开辟越发简朴，体贴的东西更少。
个人博客：http://tangguangyao.github.io/
