31-尚硅谷-webpack从入门到精通-性能优化总结

一下前面我们写的这个优化环境的配置。好，我们来打开我们的Vs code。拿到我们之前的一个时期啊，优化环境介绍我们呢，在这里把我们的一些之前的优化，把它写在这儿啊。那我们来看啊，首先是开发环境的优化。我们呢说了啊，可以优化打包过去速度，可以优化代码调试。那么优化打包做的速度呢，使用的是我们的那个HMR功能。模块热替换，或者说热模块替换。好了，那它的意思呢，就是啊，当我们构建的时候，如果只有一个模块发生变化，那么只会重新构建这一个模块，而其他模块呢，会用他之前的缓存啊，是这样的关系。而这个呢，就可相比啊，之前没有HM功能的时候，当一个模块发生变化，所有模块全部要重新构建。那么可以想象啊，假设我们的模块呢，有1万个，那么改一个模块要重新构建1万个，那么这性能啊，可以想象是比较差的。

所以当你在开发模式下使用这个HR功能，那么可以构建速度呢，会更加快一些，从而呢，让我们用户体验，让我们开发者啊体验更好。所以呢，我们一定会用上这个HM呢。HM功能呢，针对这些文件啊，有这以上这几种什么CS文件对吧，JS文件和H文件。HM文件呢，不需要做，因为呢，一般来讲只有一个文件不需要做啊。好CS的话呢，它呢经过style的处理，它是默认就就可以做好的，所以我们也不需要操心。那么也就意味着当我们使用HMR功能的时候必须要使用啊，要注意。而J呢，就得需要我们人为去自己写了啊。首先判断金融性啊，判断它是否支持开启的这个HR功能if。然后再通过ity去接收一个某一个文件啊，某一个文件。那么当这个文件发生变化的时候呢，其他模块就不会重新打包了，诶只有这个文件呢，会被重新编译处理。

然后呢，再运行那个回调函数。所以JS呢，它默认是不支持的，需要我们自己写，所以大家将来呢，你如果要用HM功能，那要切记自己要写一写这个相关的内容。好，这是H，那么第二个呢是优化代码调试啊，那么这里面上个技术叫map。好，主要是呢，让我们开发环境下呢，调试啊更加友好，而而引出的一个东西叫map。好了，那map呢，它一共有非常非常多的值啊，我们呢，大概要搞清楚每个值代表什么含义，以及呢，我们最终推荐的一种写法。我们打开之前写的那个内容啊，我看一下。它其实呢有非常多种，我们文档呢，已经写在这个配置文件中的最下面了。它分别有S。好，这些值呢，又有不同的组合啊，诶他们说了就是位置呢，首先是按照这个位置排列，这三个只能选一个啊，这个呢，要么有要么没有，这两个呢，要么都有，要么只有一个啊，就是这个。

好，那分别代表含义就是外呢和E呢是代表内敛，而其他的所有呢都代表外外部的。那就是意味着就是source map文件呢，会和JS文件会放在一起。而外部的话呢，就会分隔开来一个单独的一个这样的一个map文件啊。那么map这个技术呢？它是提供一种源代码到构机后代码的一个映射的一个技术。OK，就当我们啊，我们运行的代码呢，是叫构建后代码。一旦过去后代码出错了，我们非常不利于去看到底是出了什么错。所以呢，就需要提供一个它和语为代码映射的一种东西，诶那么map呢，它就提供这个方式方式。通过map呢，我们就能够找到源代码，诶，到底是哪里出错，从而方便去修改咱们的代码。

那么这些值呢，内联的话呢，一般我们用于开发模式，它速度更快，而外联呢，一般用于生产模式。啊，这是因为内会内里到GS中，会导致GS文件变得相当大，所以呢，我们为了减少JS文件的体积，所以在生产环境下一般是不会放在内部的。那么he呢和S呢，它代表是隐藏我们的一些源代码的一些信息，一般用于开发环，一般用于生产环境啊生产环境。隐藏源源代码的信息，就是为了防止别人啊找到你的源代码，从而做一些非法的勾当，所以呢，这些呢，是为了隐藏源代码的一些措施。好，No sources呢相当于是完全隐藏，而he呢是隐藏源代码，但是构建后代码的一些内容呢，还是能看到的。所以你可以理解为啊，比如说hidden是半隐藏，S呢是全隐藏，类似于这样。而trip呢，就是默认情况下呢，Map会记录行和列，精确到每一行每一列的一个这样的关系，错误关系，而trip呢，就是让你只集确到行。

那么只计算行的优势呢？在于打包速度呢？会稍微快一点，因为我不用管每一列了。而呢，就是一些其他的一些，比方说我们一些这样的一些文件加进一起去提供参考意见，提供更加完整的一个这样的误信。啊，当然呢，因为我们到最后上线的时候，其实啊也这个信息有没有其实也没关系，所以这个猫呢，你用不用都行。用的话呢，就是说白打包速度稍微慢一点，不用的话呢，稍微快一点啊就这个。所以最终总结下来呢，我们推荐使用有两种用法，开发环境下evil source map啊，加上E呢，速度会非常快啊。好，你希望打包信息非常完整的话，那就可以加trip map，这个打包信息呢，会更加完整。就是开发环境的一个方案。环境呢，最简单就是map提供一个较完整的一种这样的关系。好了，如果你希望速度快一点，你加个trip，那么希望再完整一点，加个module啊，Trip module map都行。

那么最终我们如果大家将来使用过那个脚手，脚手或者脚，会发现脚手和脚都是选择是前面这两种方案。那么后两种呢，是社区或者是我们经过研究呢，发现也是可以那种方案，所以呢，这两种呢，你都可以选啊，都可以选。那么这就是map，大家也知道开发环境下我用什么，生产环境下用什么。我们回过头来看啊，那么这以上呢，就是我们开发环节的一些优化。从这一点出发，你会发现就是我们对开发环境的优化呢，其实考虑的点啊没有太多啊，我们希望它就是最关键的点啊，就是它打包速度啊更加快一些，那么就够了，这是最关键的点啊，就是这个。而不同的是，对于生产环境优化呢，我们需要考虑的点要非常的复杂啊。我们要考虑的面面俱到。最终的目的呢，是让我们将来上线的代码性能能达到最好最好，从而呢让用户体验好，那么我们这个产品呢，哎，就更好了。

所以呢，我们从这两个角度呢，去提出一些思想，哎，优化打包构建速度，哎这个呢，其实是提升我们开发者的一些体验。第二个呢是优化代码预习性能，诶这也是最重要的，就是让我们最终我们的这个构建后代码呢，能够性能更加高效。好，两个角度我们都做了一些处理，比如说第一个优化打包课题思路，我们用那个one of。对吧。默认情况下，我设置了比方说七八个load啊，那么每一个文件呢，都得通过这七八个一起处理。当然呢，因为比方说我这个JS文件啊，那么遇到less loader啊，这些load它是不会处理的，因为test这个正则呢，它检验不了啊。但是呢，哎，但是虽然他不会处理，但是还是会被过一遍，哎这样的就感觉不太好啊，就跟我们在数据库查询的时候，哎，我们要找一个元素，找一个元素啊，你把整个数据库都编辑一遍，就前面已经找到这个元素，你还是把后面的数据库都编辑一遍，那后面的就是浪费性能了。

对吧，你前面找到了，那直接用啊，那你后面的干嘛还找呢。所以我们用万呢，能够让这些呢，找到了就直接用啊，后面的就不看了，能够提升一些性能啊，能够提升一些性能。For you off。好，那玩偶服用的时候你一定要切记啊，就是不能把。如果一个文件需要经过两个这样的一个load配置去处理的话呢，你千万不能放在同一个one of里面，因为这样呢会导致只有一个生效。所以啊，我们做法是将呢放在外面啊，One of里面呢包，这样就解决这个问题了。所以要注意啊，这弯呢，可以优化一些啊，包括速度。好，那么还有啊，还有就是我们第二个呢，做了缓存啊，缓存的话呢，我们有B缓存和这个啊，咱们的一个持久化缓存。缓存，其实它是优化打包速度。

Apple子呢是用来优化打包后的数字。APP缓存开启缓存之后呢，我们B运行的结果呢，就会缓存起来，那么你第二次重复新打包的时候呢，速度就会快一些快一些。那么为什么要进行标缓存呢？我们前面也说了啊。就我们的一般来讲，代码中啊是JS代码是最多的。尤其是将来大家使用框架去开发，你会发现呢，基本上都是JS代码。好了，那JS代码很多，那么也就意味着啊，咱们在JS文件处理的时候呢，花费的时间是最长的。而其中对JS文件处理呢，我们有yes in和B呢？Yes it只是对代码进行检查，有有错误就报错而已。而B呢，它不但要检查，它还得转换，所以这个过程啊，相对来讲更加耗时啊，更加耗时，所以开启的B缓存呢，更加有利于我们的JS文件的一个处理。所以合就是这个。

第三个缓存呢。啊，那么。是在是优化代码预习性能啊，这款存呢，只要只是由三个值构成的啊。哈希值串哈希值。和我们的查系制。好，那么这三个哈气值呢，分别啊，让我们的文件进行缓存，那么什么意思呢？我们会说一下。然后呢，为了让用户体验更好，我们会对他进行强制缓存处理。比如强制七天，一天或是一个小时啊等等。一旦强制期间啊，那么这个文这个资源就不会被撤了，就不能撤了啊。所以一旦我要改变这个资源，那就很难办，很难办。所以我们就考虑诶给他加那个哈希值，作为它类似于一个版本号的一个关系一样。一旦这个哈希值变了，那么我这个文件就会重新请求，哈希值不变呢，它因为还是原文件，所以就会总缓存。

做核算。那么哈希值呢？一共有三种，哈希哈和可能哈。好，这是一个面试题，就问你这三者的区别。哈希值指的是我们外派每次打包的时候都会生成一个唯一哈希值。也是文件，不管它变不变化，我的哈希值一定会变。所以这样呢，会导致一些问题，就是我文件明明没有变，但是你重新不小重新打包一次，那么我整体内容会变。所以这样不好，这样不好。我希望做的点就是我JS文件变化，只有JS文件变，而C文件变，C文件变化呢，只有C文件变。所以第二个概念呢，叫做串踏实。串开呢，就是来自于同一个串。就简单来讲，如果你打包是来自于同一个入口，那么你就属同属于一个串口，同属于一个串口呢，共享同一个哈希值啊，就这样的。好，这样做法呢，就是因为我样式文件也是来自源于JS文件引进来的，所以这时候啊式文件和JS文件的哈希值也是一样。

所以一旦JS文件变样式，文件的哈希值也变，那这样呢，也不太好。所以最后呢，引出一个东西叫con，根据文件内容去生成哈希值。我不管你来不来自于同一个串口啊，管你啥。反正你最终呢是一个文件，那么根据这个文件呢，我再去生成对应的哈希值啊。那么文件内容不同，我的哈希值就一定不一样。所以这样的能保证就是你第二次打包的时候，如果文件内容没变，它的哈希值呢也不会变。可以通过哈哈SH呢，能够更好的对我的一些呃文件呢，比如JS文件或者样式文件做一些持久化缓存。好，这是这个缓存的一个处理，它最终呢，能让我们代码更加好利用这个缓存，从而呢，哎，第二次访问的时候呢，能速度非常快。所以这一块呢，是优化我们代码运行的性能啊，代码运行性能。

那么这是缓存啊，这是缓存，除了缓存呢，你看我们还做了以下这些事啊。我们还做了一个tree啊，Cos我们来一个看啊。我们来研究这个，它呢是为了优化我们代码的性能的。诚信。所以这个呢叫做树摇对吧，我们可以理解为啊，就是咱们整个应用程序呢，是一个数。对吧，我们引用的代码，引用的一些库里面的一些内容，他们是我们树上的绿色的一些鲜活的树叶。而如果是我们没用的代码，没用的一些库，那么它对于我宿舍来讲就是一些灰色的，一些枯萎的树叶。那么一旦我们把这个树啊一一摇晃起来，那么这些枯萎的树叶呢，就会落下来，就会就会自动清除掉。所以数的概念呢，就是去除啊，我们这个应用程序中没有使用的一些代码，从而呢，让我们代码体积更小，那体积小，那请求速度快，那么用户体验就更好呗。

啊，所以是这样的。那么树摇呢，大家需要记住两个概念啊，就是必须开启这个yes的模范，Yes模拟才能开启这个树摇。它里面呢，会使用一个JS去压缩代码，压缩代码的时候呢，会自动清除未引用代码。所以只要你使用production，它会自动启用一个插件啊，这插件会自动的做这个tree树。啊，就是这个。那么树呢，就这样，树呢，这里面呢，我们还可以在package中写上一个这个啊。就是万一呢，我们这个里面呢，他把一些我们不想删除代码都给删除掉了，那么记得在这个里面把某些文件，你不想删除的文件呢，在这里写好注释啊。写好，否则的话呢，删除了一些，你不写一些代码的话呢，就非常的不好啊，非常不好，比方说样式代码，比方说什么I be这种，我们引入呢，并没有使用代码呢，可能会被删掉，那么通过sets里面注释的话呢，那么一定不会被删啊，就是这个。

啊。那么这tree的话呢，使用起来很简单，那么大家更重要的是知道其中的概念啊，该怎么做。好，接下来呢，还有叫代码分割啊，代码分割呢，是为了优化这个代码的性能。代码分割。蛋白分割呢，我们讲了三种情况啊，最终呢，使用起来呢，我们这两种两种。这两种场呢，你分别从可以从单入入。因为将来我们开发的应用程序，大部分人都是使用单页面应用入口的啊，当然也有可能是采用入口的啊。那么我们说了单入口呢，默认情况下输出呢，只有一个串啊，就是只有一个B吧。

引入进来东西成为一个串口，输出数据呢，叫做扳倒。说的个。那么比方说我1万个模块，那当输出到一个文件中呢，代码体积就非常非常大啊。非常大，所以我们要进行代码分割，将一个大的JS文件呢拆分成多个小小的JS文件。这样呢，第一个我们可以并行加载这些JS文件，那么速度呢，就会比加载一个大的文件的速度更快一些啊。就是这样的，所以我们要拆分。入口的话呢，拆分的话呢，两种方式，第一种方式是通过optimization all啊这个这个配置。也就说当你使用这个这个参数的话呢，咱们对于单入口的环境下，那么输出结果呢，至少有两个GS文件。一个是not models里面的文件，一个是其他你写的源代码。

这是这个。好，那么单入口的话呢，还通过这个语法啊，对指定的JS代码进行分割。只要你JS代码是通过import引入的，那么一定会分割成单独的一个文件。那么你再通过再去引入另外一个文件，那又会分割成一个文件。所以通过import这种语法呢，就可以对代码进行分割了。那么将来我们去开发项目中，诶使用的那些啊，什么来什么代码分割的方式啊，或者说路由的一些加载啊，我们对由的话呢，就会使用这种代码分割进行分割的。好，这单入口的做法啊，就加上optimization。分割这个代码通过分割指定的一些JS代码组合成我们单入口的一个代码分割方。多入口的话呢，就是你有几个入口就会输出几个文件啊，输出几个文件输出几个。那么多入口的话呢，还是会加上optimization来提取多入口，直接公共代码乘一个。

如果没有optimization的话呢，那么多入口的话呢，它会重复打包重复的代码，那这样不太好。所以加上optimization呢，能够进，不会重复打包，重复代码。然后同时他也会提取这个里面代码。然后多入口呢，也能用import语法啊，也可以用import语法。就是这个。就对指定的一些文件呢进行分割。好，所以代码分割的话呢，大家考虑单入口和多入口，以及相应的我们到底要分割什么代码，我们使用什么方案啊，这大家要清楚。嗯。就是学到后面，其实对于这些第三方的文件，你看我们将所有的文件是不是都打包成一一起了，对吧，代码分割成一起了。所以你最后呢，还可以使用我们后面讲的deal这个技术啊，对这些第三方的库呢，再次进行单独的去打包，那这样呢，能够对这个第三方库呢次细化。

就比方说你引入了这样十个在第三方库，如果打包成一个文件的话呢，那就比较大。通过个技术呢，你可把这个单独分成这样呢，就会更小一点啊。所以真正在做的时候呢，我们每一个概念并不是单独的去做的，而是你要灵活应用，将这些技术呢，全都利利用在一起，这样呢就能够把这个功能呢做的更好，把这优化呢做的更加细致啊。好代码分割之后呢，接下来还有个西叫加加。加载顾名思义就是某个JS代码呢，一上来不加载啊，后面才加载，注意啊，不是说图片加载啊，不是图片加载。是G的。那么这里面呢，就是用上代码分割这个技术，只要你在代码分割这个分割代码这块呢，是在异步中执行的，那么它就会加载。一上来呢，并不加载这个代码，然后呢，等我这个条件触发了，我再加载这个JS代码。

那么优势，优势就是如果这加代码一上来并没有用，那么他慢慢的后面加载的话呢，不会影响其他主要代码的加载，这样呢，我的主要代码加载速度就会更快一些。就懒得攒啊。而易加载的话呢，就是哎，我一上来不加载对吧，那其他资源加载完了，我再偷偷的加载。它的优势在于呢，就是懒加载的时候，是我出发的时候再去加载再执行。如果文件体积较大，那我这个用户呢，会感觉到明显的卡顿。而易加载的话呢，是等你其他作业加载完再偷偷加载。这时候你在使用的时候，很可能我文件已经加载好了。所以速度呢，就会比较快啊。所以通常来讲，应该是预加载技术比懒加载更好一点。问题是载的性问题比较严重啊，所以用的时候呢，一定要慎重。啊，所有接入新问题，大家可以去那个can I use对吧，Can I use这个网站去查看啊。

好，这是懒加载和预加载啊，它的一些问题，那么后面呢，我们还有很多内容，还有p wa啊一些东西啊，P wa多进打包N和我们来看啊。首先p wa呢，它优化的也是代码运行的性能。在这。打包呢是优化打包构建速度啊，我们先全部写好。然后呢和的话呢，他们都是为了优化这个啊代码运行的性能。好，我们来分别解释一下。G wa呢，它是一个离线可访问技术，或者说间接式网络开发应用程序啊。PW它呢是由service worker加上cash方法组成。那么它的主要作用就是帮助我们去让我们的网站即使离线的环境下也可以访问，让我们的程序呢变得更加友好啊，访问起来更加高效的一个这种方案。

就是这个啊，皮条边。啊，具体变更呢，大家可以参照我们前面的视频啊，这PW呢，它它优势就在于非常明显，就是它能让用户体验非常好。离线也能访问啊，跟我们的APP一样。那缺点呢，就是兼容性问题比较严重啊，需要我们去处理它的兼容性，以及对这个缓存的到底怎么去处理呢？稍微的麻烦一些。好多进程打包的话呢，就是啊我们啊，当将来我们的应用程序呢，非常的多，非常的复杂，因为我们默认打包是单进程的啊，这速度呢，会随着某一个任务呢，如果消耗时间比较长，它要花大量的时间在那里卡着。所以就其他任务呢，就没法做，就在那里干等。对吧，所以开启多基层打包的就是同一时间能干多件事，这样的效率就更高一些。那么多进程打包呢，它优势就是诶能够提升打包速度，那么缺点就是每个进程的开启和交交流呢，都会有开销，大概能600毫秒左右，对吧。

所以要使用多金打包，一定要考虑清楚，就是当前的任务，它它的时间啊，必须肯定是要超过几超过这样几秒钟啊，这时候才会用上这个多金属打包。他一定针对的是一些消耗时间比较长的一些任务。那么这里又再次强调啊，消耗时间比较长的肯定是任务。比方说yes loader和loader，而其中做事是最久的，所以多打包呢，使用的three的loader来针对loer呢进行优化啊。当然，因为我们的JS代码很少，所以我们在测试的时候是看不出来的。当然了，大家可以放在自己的一个啊，线上的一种，自己将来开发的一些项目代码，这时候呢，应该会得到一些较明显的一个用户啊，一个性能的提升啊。好，这多集成打包啊，那么大家注意注意它的问题。接下来有S和deal，和deal呢，他们两个技术呢，都是为了让某一些文件不被打包而优化的。

啊，他们应该是优化打包这速度啊。啊油耗打包的购速度比较多上呢，就是让某些库呢不打包啊不打包，第二呢，也是让某些库呢不打包。比方说吧，我们一直在使用，一直在使用view开发啊，每次我打包的时候都要重新打包view，那太麻烦了呗。所以以上的想法是这样，我就裤裤，我就不打包了。我通过CDN直接引入。所以呢，你就首先要说明哪个库不用打包，第二个你要在HL中通过CDN链接把这个JS库，把这个库或者库引进来才行。这是externals的一个想法。而第二呢，想法呢，稍微有些不一样，也是比方说库或者view库不打包，但是呢，他呢会将这个库呢单独打包，而不是作为CDN连接引进来。就是我先把这库啊，先打包好对吧，先打包好后面呢，你就直接用就好了，你就别再打包了，诶第二呢，是这个想法。

而思路呢，就是彻底不打包，我就完全不打包，哎，你后面也别管了，直接通过CDN链接引进来就好了。所以如果你公司呢，已经把它部署成一个CDN连接可以使用的话呢，哎，那你用extern当然是比较好的。如果你公司呢，所有东西呢，所有代码呢，都得部署到自己的线上服务器，对吧，那么你可以用。单独打包是不是，然后面直接引入即可啊，直接引用。那么这里面呢，应该是第配置呢，是较为复杂的，需要写两个配置文件，至少啊。一个是作为单独打包的这个配置文件。一个呢，是我们正常运行的配置文件。所以呢，哎，这里面大家需要好好研究一下啊，好好研究一下。那么第二呢，最后呢，它也可以跟这个啊代码分割呢，结合在一起，我们说了代码分割呢，对呢，只能拆分成一个文件。

但是将我们里的库呢，非常庞大，如果你只拆分，拆分成一个文件的话呢，那么可以想象啊，加载速度是极慢的。所以通过第二的话呢，我们可以。把这些单个这些库呢，第三方库啊，可以分别进行打包。那么他们分别进行打包呢，就会生成不一样的一些那么一些文件，从而呢，再去一个个引入一个引入。所以呢，我们最终啊，代码分割加上deal，可以对我们的代码呢，进行更加系统化的一个拆分，你想我们代码呢，就分为两个层面，一种是not。第三的种代码。啊，就这两种。对吧，码呢，通过种做分分几块分几模。黄东的莫斯呢？借助optimization的话呢，你永远只能拆分成一个，对吗？

所以再加上第二这个基数一加，哎，我就想拆几个就拆几个。就我想我想要拆的东西通过去拆开来，不想拆的东西呢，通过optimization打包成一个文件，那么就可以了。所以最终呢，代码分割呢，我们用的技术啊，会加上代码分割加上DEAL1起来运作，从而呢，让我们代码呢，实现更加系统化的一个拆分方案。好了，那么这以上呢，就是我们优化所做的事。当然了，优化呢，远不止这些啊，还有一些方案，那么后面呢，我们在介绍后面这些内容的时候，还会给大家再讲一些，诶可以优化的一些措施啊，一些小的一些细细的措施。那么咱们在这儿呢，至少讲了十几种方案，那么大家要清楚啊，他们到底是做什么的，以及如何进行配置。当你学好了这些东西的话呢，能够让你对外派的配置呢，那要更进一步。同时呢，在将来大家去面试的时候啊，你也能知道，诶我能，诶那么派呢，做哪些优化啊，针对什么方案做哪些优化呢。

好了，那么这以上呢，就是我们对性能优化的一个总结。