前言大家好。我是林三鑫。用最通俗易懂的话讲最难的知识点是我的座右铭。基础是进阶的前提。tree-shaking你可能会发现，很多人看到都会背下来，用来应对以后面试官可能会问到的情况。然而，又有多少人真正理解tree-shaking呢？自己实践一下，看看tree-shaking有什么作用？我们的包装体积优化了多少？什么用途？TreeShaking的中文意思是摇树。在webpack中，指的是打包时抖掉无用的代码，优化打包结果。而webpack5已经有了这个功能。打包环境为production时，默认开启tree-shaking功能。练习前准备准备两个文件main.js和util.jsutil.jsfunctiona(){console.log('a')}functionb(){console.log('b')}exportdefault{a,b}main.jsimportafrom'./util'//使用变量，调用文件中的a函数，不使用b函数console.log(a.a())console.log('helloworld')//不可能的代码if(false){console.log('haha')}//定义了但没用的变量constm=1打包前面说了，生产环境打包webpack5，默认开启tree-shaking。然后我们运行npmrunbuild来打包，看看打包后的代码长什么样：(()=>{"usestrict";consto=function(){console.log("a")};console.log(o())console.log("你好世界")})();结论：可以看到打包后，b函数，不能执行的代码，不用的变量都被淘汰了。这在一个项目中，可以减少很多代码，从而减少打包后的文件大小。sideEffects副作用先说一件事——副作用，是什么？副作用指的是导出成员以外的东西。让我举一个例子。下面的a.js没有副作用，b.js有副作用：a.jsfunctionconsole(){console.log('console')}exportdefault{console}log('console')}//这个是副作用，会影响全局数组Array.prototype.func=()=>{}exportdefault{console}是否有副作用的判断可以判断优化程度摇树。比如：我现在引入了a.js，但是我并没有使用它的console功能，所以我在优化阶段根本不需要打包a.js。这个文件。我现在引入b.js但是我没有使用它的console功能，但是b.js文件我无法解压，因为它有副作用，我无法解压。sideEffects的使用sideEffects可以在package.json中设置：//所有文件都有副作用，都不能tree-shaking{"sideEffects":true}//没有文件有副作用，都可以tree-shaking{"sideEffects":false}//只有这些文件有副作用，//所有其他文件都可以进行tree-shaking，//但这些文件将被保留{"sideEffects":["./src/file1.js","./src/file2.js"]}优化体积当我将sideEffects设置为true时，整个打包体积增加了100k，说明默认的false还是有用的。.结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友，一起钓鱼哈哈，摸摸鱼群，加我，请注意[思想]
