24-尚硅谷-webpack从入门到精通-tree shaking

好，接下来呢，我们接着来去进行优化，接下来我们讲的概念呢，叫。好吹什么意思呢啊，简单的翻译啊，可能大家就会觉得它是树摇啊摇晃树，树摇。好，那么这我们来解释一下。就是啊，你可以把你的应用程序啊，想做是一棵树。而你在应用程序中引入的一些源代码，或者一些第三方的库，比如说这些库啊，我们可理解为是树上的一个绿色的树叶，是活的树叶。那么你呢，可能这个库里面的有一些没有引用代码，那么他们就是些灰色的树叶，是枯萎的树叶。好，为了去掉这些灰色的树叶啊，我们需要摇晃这个树，那么就可以去掉它们了，那么这样呢就是树摇的概念，树摇它的目的就是为了去除我们在应用程序中没有使用的一些代码，这样呢能让我们代码的体积呢变得更小。好，那下面呢，我们来看一下这树摇是怎么回事啊。我们来复制一份，来到22数羊吹。

好了，那我们来看这一个代码怎么做啊，这server呢，我们不需要了，删掉啊，我们来congu，这里面把这个内容呢删掉啊，这里呢，我们看书瑶。去申请。呢，我们要知道就是它的目的是为了去除无用代码。这无用代码呢，可能是无用的JS代码，也可能是无用无用的一些CS代码。那么JS的话呢，一定要记住啊，它的它要使用的前提条件有几个前提。对，必须。需要才行。不使用E模块化呢，用不了。并且呢，开启咱们的一个啊。环境，那么就可以自动的启用这个树了啊，自动启用树了，使用module，还有production。

我们现在呢，已经将调为production了，我们可以看一下啊。东西都收起来，我们已经是production了，所以第二条件满足啊，所以我们要使用第一个。好，我们的JS文件我们来看啊。我们JS文件呢，就使用的是STEM module，所以呢它也使用了。那我们来看，为了表达，为了让这个数看得更仔细一点呢，我们再新建一个文件啊，比如test测试一下。里面我们定义两个方法。SY。Return一个X乘以Y。好，再定一个方法啊，叫做。咱们的一个减法吧，Can f。然后呢，X减Y啊就非常简单一些方法，不用写的太复杂。我们关键是验证它会不会去除未经用的代码，所以呢，我们呢，将这两个方法呢，都给暴露出去。都暴露啊。

那么好，那么我们在index JS中呢，负责引入他们。但是呢，它有两个方法，我只引入一个啊，只引入一个。引入哪一个呢？我们比方说引入这个M乘法啊。好，下面呢，我们就简单测试一下，打印下来没有。来一个二乘二啊或者二乘三吧。好，然后同样的通过把它给关掉啊，禁用它的一个检查。好，那么我们可以看到啊，我们呢，只使用了test文件中的U方法。也就是说呢，这个方法呢，对于我们来讲是树上的绿色的叶子。而这方法呢，我并没有使用，所以它对于我来讲是树上的一个未进油的灰色的叶子。所以呢，通过吹身体描述的话呢，就会把这个抗方法给去掉了。那么好，我们看能不能去掉。我们来再次重新构建一次啊。我们两个都已经达到了，第一个使用了STEM，第二个呢，开启了production生产环境，所以我们只要重新构建一次，它会自动的对代码进行。

好，构建完成啊，我们来看一下构建后代码啊，构建代码呢，它会经过压缩的啊，会经过压缩，所以呢，看起来非常的会有一些不太适应啊没关系，我们直接搜搜乘法搜一个星号，哎，你会发到它匹配到一个在哪呢？关掉啊。这里就是二乘三，看到没有啊二乘三。在这个后面啊，在这后面，诶，我们再说一下啊，二乘三啊。信号。刚刚我不应该点啊信号关掉。这里就是二乘三啊，没问题，它是可以的啊，是搜得到的。那么减法有没呢？CTRLF搜个减号啊，减号是搜不到的，无结果啊没结果说明呢，这个减号剪发这个的东西呢，已经被除check了。所以呢，这个去啊啊，那对于我们来讲是非常有意义的，同时呢，配置呢，又非常简单啊，使用model catch production啊，去除无用代码，那么说白了，它作用就是能够减少我们的打包体积，减少代码体积啊。

所以呢，能让我们代码体积更小，从而速请求速度就更快，加载速度也快。所以这就是垂生性。好了，那么使用呢，我们还要注意一个小问题啊，就是呢，在不同的版本呢，可能呢，会有一点点差异啊。他呢，有有差异的部分呢，就是它会无意之间将我们的这个CS文件当做未经引用代码给干掉了。比方说啊，我们可以模拟一下测试，测试的话呢，在这个。可以配这个。好，Affairs这个什么意思呢，对吧，我们去调为false啊。好。就是啊，这个set effect呢，是这个意思，我们在配置文中写一下注释啊。

在中。PACHE。SFS呢，就是相当于是所有代码，它的意思就代表所有代码的。啊，所有代码都是没有副作用代码。没有用的意思就是可以。那么这样的问题就是我们再构建一次的话呢，当我们把build给删掉，把给删掉。再次构建一次。这个时候呢，我们来看效果啊。这个时候你会发现输的资源就没有C了，我们打一下下就没有CS啊，说这样写的话呢，会把C干啊。可能会把写怎么接。

或者说啊，我们之前的什么这些文件给干掉啊，就是其他文件。就比如说at b。因为这些文件我们都是直接引入，没有用的，这些文件可能会干掉。啊，这些文件呢，可以认为是负作用文件对吧，负作用文件干掉。所以啊，我们要去修改一下这个三的一个做法啊。比方说啊，我们不希望把CS文件干掉，这个传数组里面写个点CS，那么这样呢，CS文件就不会死了，我们来再看一下啊。改成新点CS之后再运行。代执行这个pack。这时候你会发现输出的东西呢，就有这个C文件了啊，就这样的，所以接下来呢，你可以在这个里面的标记，把些资源的标记为不要进行的资源，比如CS，比如less，比如说at这些包啊，那么标记呢，他们就不会对它进行处理了。

这是这个啊。所以呢，整体我们来看一下啊，首先啊，你必须使用e model，必须开启这个生产环境，那么就会进行了。它作用呢，就是减少我们最后的这个代码体积的啊。那么可能啊，这些版本中呢，它可能会诶，无意之间删除一些代码啊，比方说你配置的set为false。啊，或者说没有配置在过去，在过去的版本中，他可能会把CS文件给干掉。所以这时候呢，你最好还是配置一下sets，新点CS，这样呢就能保证C文件是不会走的。啊心呢，代表任意的CS文件啊，任意的CS文件。胶什么，比方说等等啊。等文件啊，那么一旦写在这里面，那么这些文件呢，就不会再进行。就不会进行了。那么这以上呢，就是我们整个垂申的作用好了，那么大家呢，需要理解它的作用啊，以及呢，要了解它要前提条件，最后呢，一定要切记啊，最好是配置一下这个set，将一些代码的标记为没有副作用代码。

否则呢，可能因为版本的原因导致出现一些问题啊。