webpack的tree Shaking原理是什么?

webpack的tree Shaking原理是什么?这是一道非常高频的webpack面试题,但是大多数同学可能都回答不出来,老规矩,点赞收藏支持一下,给我一分钟,理想哥教大家该怎么满分回答这个问题。如果我是求职者,我会这么回答:

Tree Shaking,摇树机制是webpack的一种代码优化策略,它会在运行过程中静态分析模块之间的导入导出,确定 ES Module 模块中哪些导出值未曾被其它模块使用,就是我们常说的死代码,将死代码删除,从而减少打包文件的体积,从而提高应用程序的性能。

Tree Shaking 是在Rollup 中率先实现,Webpack 自 2.0 版本开始接入,至今已经成为一种应用广泛的性能优化手段。

Tree Shaking的工作原理主要有以下三步:

第一步,主要是做静态分析。在Webpack构建过程中,它会对所有模块的依赖关系进行静态分析。它会构建一个依赖图,其中包括各个模块之间的依赖关系。

第二步,主要是标记未使用代码。在分析期间,Webpack会通过识别导入语句和变量是否被引用,从而判断出是否被使用,如果一个模块的导出在整个应用程序中未被引用,那么这个模块就会被标记为未使用。

第三步,生成输出文件: Webpack会根据标记的结果生成最终的输出文件。在输出文件中,未使用的模块和导出将被移除,从而减小打包产物的大小。

ES Module中,import语法因为可以在代码不运行的情况下,就能分析出不需要的代码。所以可以完美的使用tree shaking。而CommonJS支持动态加载模块,在加载前是无法确定模块是否有被调用,所以并不支持tree shaking。

以上就是这个问题的回答了,大家可以下次面试时试试这么回答看看效果。

最后,欢迎关注理想哥,每天学点前端面试小技巧。

#软件开发薪资爆料##前端##webpack#
全部评论

相关推荐

宇算唯航:目测实缴资本不超100W的小公司
点赞 评论 收藏
分享
代码飞升:别用口语,后端就写后端,前端就写前端,最后别光后悔
点赞 评论 收藏
分享
避坑恶心到我了大家好,今天我想跟大家聊聊我在成都千子成智能科技有限公司(以下简称千子成)的求职经历,希望能给大家一些参考。千子成的母公司是“同创主悦”,主要经营各种产品,比如菜刀、POS机、电话卡等等。听起来是不是有点像地推销售公司?没错,就是那种类型的公司。我当时刚毕业,急需一份临时工作,所以在BOSS上看到了千子成的招聘信息。他们承诺无责底薪5000元,还包住宿,这吸引了我。面试的时候,HR也说了同样的话,感觉挺靠谱的。于是,我满怀期待地等待结果。结果出来后,我通过了面试,第二天就收到了试岗通知。试岗的内容就是地推销售,公司划定一个区域,然后你就得见人就问,问店铺、问路人,一直问到他们有意向为止。如果他们有兴趣,你就得摇同事帮忙推动,促进成交。说说一天的工作安排吧。工作时间是从早上8:30到晚上18:30。早上7点有人叫你起床,收拾后去公司,然后唱歌跳舞(销售公司都这样),7:55早课(类似宣誓),8:05同事间联系销售话术,8:15分享销售技巧,8:30经理训话。9:20左右从公司下市场,公交、地铁、自行车自费。到了市场大概10点左右,开始地推工作。中午吃饭时间大约是12:00,公司附近的路边盖饭面馆店自费AA,吃饭时间大约40分钟左右。吃完饭后继续地推工作,没有所谓的固定中午午休时间。下午6点下班后返回公司,不能直接下班,需要与同事交流话术,经理讲话洗脑。正常情况下9点下班。整个上班的一天中,早上到公司就是站着的,到晚上下班前都是站着。每天步数2万步以上。公司员工没有自己的工位,百来号人挤在一个20平方米的空间里听经理洗脑。白天就在市场上奔波,公司的投入成本几乎只有租金和工资,没有中央空调。早上2小时,晚上加班2小时,纯蒸桑拿。没有任何福利,节假日也没有3倍工资之类的。偶尔会有冲的酸梅汤和西瓜什么的。公司的晋升路径也很有意思:新人—组长—领队—主管—副经理—经理。要求是业绩和团队人数,类似传销模式,把人留下来。新人不能加微信、不能吐槽公司、不能有负面情绪、不能谈恋爱、不能说累。在公司没有任何坐的地方,不能依墙而坐。早上吃早饭在公司外面的安全通道,未到上班时间还会让你吃快些不能磨蹭。总之就是想榨干你。复试的时候,带你的师傅会给你营造一个钱多事少离家近的工作氛围,吹嘘工资有多高、还能吹自己毕业于好大学。然后让你早点来公司、无偿加班、抓住你可能不会走的心思进一步压榨你。总之,大家在找工作的时候一定要擦亮眼睛,避免踩坑!———来自网友
qq乃乃好喝到咩噗茶:不要做没有专业门槛的工作
点赞 评论 收藏
分享
评论
7
13
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务