前端技术 桑世龙 Webpack前端工程化实践-i5ting

Webpack前端工程化@i5ting他们叫我狼叔Nodejs布道姓名：桑世龙部门：去哪儿网前端架构师简要介绍：嗷呜。。。StuQ明星讲师被坑的CTO晒娃狂魔M岫＜--W伽2017css预处理器Java：Cordova依赖管理npm,bower图片压缩imageminIK行）陰流在资源处理DataURL模板引擎jade,handlebars,nunjucks压缩uglifyjs,jsmin,csso模块系统CommonJs,AMD,ES6Modulesjs友好语言coffee,babel,typescript模块加载器■■■I■require.js,jspm5sea,system.js）React组件化、Vuejs（未来趋势）3）Backbone,Aic、•JJE础）ElectronWebpackNPMScriptsCSS预处理PostCSSxlessxsass现代Web开发构建工具grunt,gulp,make模块打包器browserify,webpackWebpack的前世今生❷＞前端工程化目录23Q/AWebpack的前世今生理解演进过程依赖下载•下载某个库或插件•下载它的依赖，以及依赖的依赖•无穷尽...依赖管理pm/bowerNPM.Node.js内置，你值得拥有•在package.json里存储包的描述信息和依赖•npminit:创建package.json配置文件!1!•npminstalljquery-save:安装并保存至Upackage.json•npminstall:安装在package.json里的所有依赖脚本加载123<scriptsrc=njquery•jsHx/script><script>$•uiBackCompat=false;</script><scriptsrc=Hjquery-ui.jsHx/script>windowevaliframe$.getScript()该有模块系统了・使用标准的模块系统来处理依赖和导出•每个文件是一个模块•使用模块加载器或打包器进行处理AMD,CommonJS,ES6ModulesCOMMONJS•require。...")：Loadsmodule,returnsexports•requireC./helpers.js11):...byrelativepath,returnsexports•requireC'jquery"):...fromdependenciesmanagerfolder•exportsormodule.exportsexportobjectvar$=require(HjqueryH);exports.doSomething=function(){return42;moduleexportsrequireglobalAsynchronousModuleDefinitiondefine("module"f

["depl",”dep2"],functional,d2){returnsomeExportedValue;});require(["module"f

11../file11

]f

function(module/file){/*...*/});CommonJS中逐渐分裂出了AMD,专门用于浏览器的因为浏览器没有io读写api/amdjs/amdjs-api/wiki/AMDAmdcache[id]=mapping[id]()}cache按需加载definerequire{cache[id]}if(cache[id])return}else{returnvoidfunctionf){varmapping={},cache={};window.define=functiondd,func){mapping[id]=func}；window.require=function(id){if(!/\.js$/.test(id)){id+=js"}}()；我知道的require.js模块最多的开源项目。https://ace.c9.ioBuiltforCodeAceisanembeddablecodeeditorwritteninJavaScript.ItmatchesthefeaturesandperformancVimandTextMate.ItcanbeeasilyembeddedinanywebpageandJavaScriptapplication.AceiCloud9IDEandisthesuccessoroftheMozillaSkywriter(Bespin)project.1

▼/**2

*Infact,you111relookingatACErightnow.Goaheadandplaywithit!3*4*WearecurrentlyshowingofftheJavaScriptmode.ACEhassupportfor455*languagemodesand24colorthemes!6♦/78functionadd(x,y){9varresultstring="Hello,ACE!Theresultofyourmathis:”；10varresult=x+y;11returnresultstring+result;12}1314varaddResult=add(3,2);15console.log(addResult);16IiniipvES6模块•import...from"...":Loadsmoduleandbindexportedvariablesintoscope.•importabcfrom"...":Bindabctothedefaultexport.•import{abc}from"...":Bindabctothenamedexportabc.•import{xyzasabc}from"...":Bindabctothenamedexportxyz.•import*asabcfrom"...":Bindabctoaobjectwithallexports.•import"...":Loadsmoduleonlyforside-effects.•System.import(,,...,,):Loadsamoduleasync,returnsaPromisetoallexports•import"./helper.js"andimport"jquery"•Resolvingnotspecified•EveryoneassumesthesameasCommonJs•使用多个＜script＞标签加载•手动管理顺序•手动管理加载哪些<scriptsrc="/wreq.js"></script><scriptsrc=,7js/entry.js"type="text/wreq"></<divid="res">[]</div>开发环境moduleloader戸■品环境modulebundler•runsinthebrowserandloadsmoduleswhentheyarerequested•easytouse•lessoptimizedforproductionusagegrunt/gulprequire.jssystemjs•runsinpreparationandbundlesmodulesintostaticfiles•needsapreparation/buildstep•moreoptimizedforproductionusager.js\browserify\webpackjspm所有资源都是模块webpackMODULEBUNDLERmoduleswithdependenciesJsJs•pngstaticassets如何工作：打包过程Entry-options:初始化配置after-emit：输出完成Compile：开始编译make：分析入口文件创建模块对象Build-module:构建模块emit：Compiler开始输出生成assets,插件有最后机会after-compile：完成所有模块Webpack•从配置文件里找到entrypoint解析模块系统解决依赖模块依赖处理（读取，解析，解决）合并所有使用的模块合并模块系统的运行时环境•产生打包后的文件1234567910111213141516171819202122__webpack_require__(1)console.log('a')],__webpack_require__.e/*require.ensure*/(0).then((function(require){__webpack_require__(6)}).bind(null,__webpack_require__)).catch(__webpack_require__.oe)/***/})[0])；/***/}),/*1*//***/(function(module,exports){webpackJsonp([1],[/*0*//***/(function(module,exports,__webpack_require__){浏览器•通过〈script〉加载webpack打包后的文件•加载模块运行时环境.加载entrypoint•读取依赖•解决依赖•执行（带有依赖的）entrypoint1.<script>混乱加载2.各种模块系统标准，commonjs/amd/es6module3.模块加载器，requirejs/sea/systemjs4.模块打包器，webpack/r.js/jspm/browserfyA.合并入口，对外暴露的只有entrypointB.提供浏览器运行环境（内置模块加载器）C.优化（tree-shaking、DCE无用代码移除等）你只管写就好了其他的webpack来你能写好，就好了。。你能写，就好了。。你能，就好了。。你，就好了。。Loaders模块1压缩模块2优化合并模块npluginswebpack前端不只有jshtml模板引擎Transpiler打包器的演进•browserify•webpack1•rollupcommonjs规范多种模块利用es6模块能静态分析语法树的特性，只将需要的代码提取出来打包，能大大减小代码体积•webpack2CodeSplitting分离第三方库:第三方库代码不会频繁修改varmoment=require('moment1);console.log(moment().format());varpath=require(1path1);module.exports=function(env){return(entry:'./index.js*,output:(filename:'[chunkhash].[namepath:path.resolve(__dirnamevarpath=require('path');module.exports=functionenvreturn{entry:{main:1./index.js'，

vendor:'moment'output:(filename:'[chunkhash].[name].js',path:path.resolve(__dirname,'dist1))再次运行webpack,可以发现生成了两个bundle。然而如果查看他们的代码，会发现moment的代码在两个文件中都出现了!varwebpack=require('webpack');varpath=require('path');module.exports=function(env)(return{entry:(main:'./index.js'>vendor:'moment1}>output:(filename:'[chunkhash].[name].js',path:path.resolve(__dirname,'dist')})plugins:Lnewwebpack.optimize.CommonsChunkPluginname:1vendor1

//指定公共bundle的名字。)现在运行webpacko查看结果会发现moment代码只会出现在vendorbundle中require.ensure()webpack在编译时，会静态地解析代码中的require.ensure(),同时将模块添加到一个分开的chunk当中。这个新的chunk会被webpack通过jsonp来按需加载。\\entry.jsrequire(1

a');require.ensure('',functionrequirerequire('b1);})；bundle.jsWa.jsIAMa*****,)；console.log(******\\b.jsconsole.log(1*****IAMb*****1);0.bundle.js前端工程化人生苦短，我选Nodezi匕日—、冃万M带来的冋题carryonHEV!getbackTOl/ORK!-COMPllWG!开发测试成本增加客户端性能受影响嘛二、构建优化解决思路FEkit工作原理Ykit工作原理App3Ykitqunarqunarreactmockbundlebundlebundle构建优化设计三、宏观优化——提升总体构建速度Webpack本地服务启动Webpackbundlelib.jspageA.jspageB.jspageC.js请求资源Ykit本地服务启动Ykit请求资源bundlelib.jspageA.jspageB.jspageC.jsYkit会根据请求的资源进行入口过滤，仅打包页面所请求的资源Webpack本地服务modulelmodule5module6b.jsmodulesmodule?c.jsmodule4modulesYkit本地服务modulesmodule?module4modules40本地服务首次启动时间0_________________________________________________________________________________________3assetsWebpack10assetsYkit20assetsooo321a)回菖回HDemo地址：/roscoe054/ykit-demos压缩优化•使用进程集群，一^进程压缩一^资源•防止Webpack内存溢出崩溃ClusterAssetl—►Processl—►MinifiedAssetlAsset2—►Process2—►MinifiedAsset2Asset3—►Process3—►MinifiedAsset3整体构建压缩耗时4030100_______________________________________________________________________________________10assets3assetsWebpackYkitha回伺20ca20assetsDemo地址：/roscoe054/ykit-demos四、个性优化—移动端项目优化实践去哪儿移动Hybrid项目特性分析•开发端：工程依赖较多’构建速度慢•用户端：对性能要求高，需要页面渲染速度快开发体验优化-Happypackapp.jsmoduleAprocesslmoduleBprocess2moduleCprocess3Webpack的构建过程是单进程的，利用HappyPack可对依赖进行多进程处理，更有效地利用系统资源。开发体验优化-Happypackapp.jsfoo.jsfilefoo.js(mtime)HappyPack可对编译过的模块进行缓存，并根据文件是否被修改过决定是否使用该模块的缓存。开发体验优化-DllPluginAppdll.config.js—►lib.jswebpack.config.js—►app.js第三方依赖模块可以通过DllPlugin打包为单独的lib.js,每次构建时候这部分不会重新构建。10针对Hy2项目的优化0首次启动Rebuild优化前优化后----8642«±~S3用户端优化-资源庞大的情况下，如何使体验更好•只加载当前页面需要的资源——按需加载•尽可能将公共资源缓存--长效缓存用户端优化-通过按需加载减小首屏渲染速度lib.jsa.jsb.jsc.jsd.jse.js异步加载与路由结合，当跳转到后续页面时才去加载对应模块constList=require.async(1./list1);constDetail=require.async(1./detail1);constRoot=()=>(