您好,登录后才能下订单哦!
代码分离是一种技术,使得主文件被拆分为多个文件,同时保证分离后的代码对原有的功能没有影响。webpack也具备代码分离的能力。由于webpack的打包过程是自动化的,因此自然的通过webpack做代码分离后的文件之间的关系要么是自动关联的要么能很清晰看到分离文件之间的联系。
webpack中代码分离的方案分为三类:
多入口
webpack从一个入口出发对应一个输出的bundle.js,那么多个入口就将会有多个输出的bundle.js,虽然这些bundle.js之间不存在自动的关联关系,但是,在HTML文件中分别引入他们就能实现了引用关联。甚至可以使用HtmlWebpackPlugin插件,自动化生成引用由webpack打包生成的JavaScript文件的HTML文件。
使用代码分离技术运行小demo之后,会发现代码确实是分离了,但是加载网页的时候所有资源是一口气按顺序全都下载。代码分离技术本身并没有起到任何的优化作用,反而由于更多的http请求,又恰好在不支持HTTP2.0的HTTP服务器上运行时,可能还会降低加载的性能。
设想一下,如果分离的文件能在真正需要的时候才加载,这样就能提高加载渲染性能。因此,懒加载(按需加载)的思想就是在用户进行交互的时候,加载其所需的资源。懒加载的思想结合代码分离的方案,这就启发了应该在用户交互的代码中加入动态导入的写法。
根据上一节最后给出的启发方案:在用户交互的代码里加入动态导入的写法,使得用户交互时才引入所需的模块。看到这里,内心很难平静。按需加载从效果上看,提高了加载性能,这自然算是优化。然而从实现的角度上看,除非有合适的定制化的插件或者自身水平极高能够改写webpack对模块的操纵行为,否则必然需要修改业务代码。从代码成分的角度看,这种写法是代码***。总的说来,如果把按需加载看成是项目实现的基础,那在实现功能的时候就要顺带实现。否则,优化之路必然很漫长,但即使再漫长,抓住本质思想就并不复杂。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。