tree shaking对打包体积优化及作用实例分析


这篇“treeshaking对打包体积优化及作用实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“treeshaking对打包体积优化及作用实例分析”文章吧。Tree Shaking中文含义是摇树,在webpack中指的是打包时把无用的代码摇掉,以优化打包结果。而webpack5已经自带了这个功能了,当打包环境为product免费云主机域名ion时,默认开启tree-shaking功能。准备两个文件main.js、util.jsutil.jsmain.js前面说了webpack5在环境production下打包的话,默认开启tree-shaking,那我们运行npm run build进行一下打包,看看打包后的代码长啥样:结论:可以看到打包后,把b函数、不可能执行的代码、定义未用的变量通通都剔除了,这在一个项目中,能减少很多的代码量,进而减少打包后的文件体积。先来讲讲一个东西——副作用,是什么东西呢?副作用指的是:除了导出成员之外所做的事情,我举个例子,下面的a.js是没副作用的,b.js是有副作用的:a.jsb.js有无副作用的判断,可以决定tree-shaking的优化程度,举个例子:我现在引入a.js但是我不用他的console函数,那么在优化阶段我完全可以不打包a.js这个文件。我现在引入b.js但是我不用他的console函数,但是我不可以不打包b.js这个文件,因为他有副作用,不能不打包。sideEffects可以在package.json中设置:当我把sideEffects设置成true之后,整个打包体积增加了100k,说明默认的false还是有用的。以上就是关于“treeshaking对打包体积优化及作用实例分析”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注百云主机行业资讯频道。

相关推荐: Android怎么自定义View实现圆形进度条

本文小编为大家详细介绍“Android怎么自定义View实现圆形进度条”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android怎么自定义View实现圆形进度条”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。原理非常简单,在自定义…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/19 11:38
下一篇 03/19 11:38

相关推荐