25-尚硅谷-webpack从入门到精通-code split

是叫代码分割，靠的是被子。代码分割呢，主要是诶，将我们打包的一个串口啊，打包输出的一个文件呢，分割成多个文件。这样呢，我们就可以去实现各项功能，比方说将一个大的文件呢，分割成三个文件，对吧，那么我们加载的时候呢，就可以并行加载，从而速度更快。同时呢，分割成更多的文件呢？我们还可以实现什么叫做按需加载的功能。就是我需要用这个文件我才加载，不需要用就不用。而这个I加载呢，对于我们来讲是非常重要的。啊，比方说譬如说我们在今后开发单页面应用的时候，我们整个页面呢，是一个非常庞大的一个文件啊，那么我们肯定是要去按照路由去拆分不同的一些文件，从而实现按需加载。那么你要拆分文件的话呢，那么就可以使用wepe这个技术叫做代码分割，首先你需要将我们的每一个路由文件呢，都拆成单独的一个JS文件，这样呢才能实现按需加载。好了，那么所以说这个IP加载功能呢，或者说我们的代码分割功能对于我们来讲是非重要的。

所以接下来呢，我们就给大家介绍一下这个代码分割该如何做。好，我们打开代码。把这个十二十二复制一份，来个23代码分割。好啊，OK，我们来代码分割，来分割代码，代码分割呢有很多种做法啊，我们呢要一点点来完成，我们现在做第一种。1M吧。好，我们把这SC呢和这个PEDGS呢拿进去，好代码分割呢，我们主要研究的是JS代码，所以呢，CS呢我就删掉了啊，我主要看GS。好，JS代码呢差不多啊，就这样，CS呢删掉。要进行代码分割，我们可以做以下这些事情，我呢把这配置呢删删减一下。删减的目的呢，就是为了让我们只关注于主要部分，而其他部分呢，就不需要关注了，比如说我把样式部分呢全都删掉。

白lo的这些也不要啊，我们全都不要啊，我们不要搞这么复杂。H的呢，也不需要全部删掉。好了，那么这个呢，整个呢，其实啊，包括这个呢，整个modu呢，都会去掉啊，都不需要了。好，HM文件都需要留着啊，样式文件的部分删掉。好了。OK啊，然后呢，Production DB tools d tool也不需要了，好，那么我们就写了个非常非常基本的一个这样的一个处理。它呢只能处理HL文件，然后呢，对HL文件呢，进行了基本的压缩啊。然后呢，这里面模式呢，是。好，代码分割的第一步啊，它呢，根据入口文件就可以去代码分割了。什么意思？譬如说啊。我们来再看一下啊，我们现在JS文件呢有两个。正常情况下，我现在打包的话呢，我们再打包一次啊。

来，右键在咱们的资源管理系统打开回车，输入IPA。正常情况下呢，它会将这两个文件啊，打包输出成一个JS文件，诶，比如说我们打开必要的会看到只有输出一个JS文件。也就说这两个JS文件里面的内容啊，都都结合在这一个JS中了。好，但是啊，我需求是我希望的这两个JS呢，诶，它是分别输出输出了两个这样的伴奏，就两个文件啊。好，要输出两个文件的话呢，诶，我们可以从入口入手。入口的值呢，可以为一个对象。有对象，对象里面的配置啊，输出的这个文件名称。好，再来一个，比如说叫我们的test。你先看SCJS下面的TDGS。那么这样做的话呢，我们就两个入口，那么index中呢，就不需要再引入test，所以就会把index中呢，把test文件的内容给删掉。

OK，删掉就OK了啊，那么再看啊，就是这里面呢，我们这叫多入口啊入口。之前呢，叫单入口啊。入口之前呢，我们还是在这写一下，之前的写法是单入口。对吧，这之前写啊，这叫单入口单入口。入，特点就是有一个入口。最终输出。就有一个班。只要有个入口，就是一个半道，有两个入口，那么我们直接看效果输出就会有两个半道。会有两个伴奏，看到没有两个伴奏啊，好两个伴奏他们都会叫啊，比方说叫做BDJS啊，我们看这就看得到了，看这个构机后代码，好这之所以有代码呢，是因为我们没有删掉，之前的我们删掉再重新构建一次啊。

好，只输出两个，我们打开两个。其中一个动呢属于index DS，一个呢属于test DS，我们来看啊。好，然后呢，这两个都叫，所以不好分辨它们到底是咱们还是所以啊，我们在命名的时候，这里可以用个。好中号内呢，就会取这个文件名啊文件名。这个中号内呢，会取这个文件名啊，那么取什么文件名呢。我在这里叫entry，这里叫may，那么取may，我这叫T，那么我这叫test，所以我们来看啊，然后这里叫。那么我输出的名字就叫index啊，这里呢叫test，我们再说意思。好，这时候你可看，诶这个叫index，这个叫test，那么我就看得很清楚了，这个index呢，就是我们那个index文件输出的内容，那这里面呢，会有个sum求和的方法，会用上一个reduce，看到了吧。

好个1234T里面呢，就有一个加一个乘法，一个减法，所以我们来看一下。这里面的A有个count方法，诶，那么后面呢，当然还会有一个什么M方法，哎，在这。是这样的。所以呢，这种呢，就是叫做通过入口多入口和入口的方式来去拆分文件。我明确知道有些文件要拆分的话呢，我会指定多入口，从而拆分他们啊。那单入口的话呢，它最终只会输出一个半，那所有文件呢，都会集合在一起。其实这个东西啊，就对应着将来我们要将来大家去学习的一个这个单页面应用的配置和多页面应用的配置。多页面用的就是咱们整个程序啊，是从多个页面中啊，通过多个页面去工作的啊，当页面用的就是整个应用程序呢，只有一个完整页面。那么单页应用呢，一般对着对应的就是单入口多页，多页面应用呢，对应的就是多入口啊是这样的。

那么这是第一种配置方式啊，配置方式那么这里就有问题就是啊，我们呢，很很难去这样指定多个入口。这问题就是因为我们每次都要改，我可能，哎，今天有两个入口，明天有三个，后面有四个，那这样一改，改来改去呢，就很麻烦啊，这样太不太灵活啊，不太灵活。所以呢，我们就第二种配置方式啊，第二种。那么叫DEMO2，那我把DEMO1的复制一份。然后呢，在这里。张天好。这个的我就点。好呢，我们来写一写啊，来写一写。这里面呢，我就改成单入口了啊，还是单入口啊呢，有一种啊，咱们提供的一种方式。Sli。

叫optimization啊。然后呢，Chance？好，这个配置有什么用呢？有什么用呢？诶它啊，比方说我们来看一下啊，我呢现在只引入index test还没引入啊，只引入index。当我们只引入这个DS时，我们把引这个。注意我引入到这里啊，我先看不引入这啊哦，现在我先引入吧，先引入啊。我先看什么呢。好，我们把这些都关掉啊，关掉。你看。比方说我先不看不用这个配置啊，标准配置，我那个打包这个index JS文件，我也引入到jary，然后jary呢，我去打印一下。那就打一下多乐福就好了啊。

那么好，我们来运行，再看效果。真心外派。那么因为我没做任何处理呀，所以最终JS呢，会打包在一个文件中，哎，你看这文件的比较大，87KB啊，其中很大部分的是属于JRY的。是这个。好了，那你加上这个我们再看。啊，加这个再看。加上这个配置，我们再构建一次。在构件啊，这时候呢，你会发现输出了两个这样的一个文件，哎，一个呢是1KB左右，一个是86KB，哎，那么我可以想象啊，这个86KB呢，其实就是我们那个J代码。好，这个M呢，就是我们之前写的这个indexs，它的一些代码。我们可以看一下B下面呢，会有两个啊，当然因为之前的有个没删掉，所以它有很多啊，其中反正这个呢，代表的就是这个。所以这个speech呢，他现在能做的事啊，就是要可以。

可以将。代码单独打包成一个串口。最终输出。它会将not这种代码呢，单独打包成一个串口，而我们这个入口呢，也会作为一个串口去打包的。所以这个呢，他会把他做事就是将not这种代码当方，那么这个有啥用呢？大家想啊，我们最终呢，我们说了代码体积会最终打包成一个文件的话呢，代码体积非常大，所以要分割开来。分开来呢，这里面做的事就是将一些哎，别人的第三方东西呢，也拿出来啊，这些东西呢，单独放在一起。这样的来呢，如果别的东西呢，我们需需要处理的话呢，还能再进一步的处理啊。所以这个东西呢，它主要是将not most中的代码呢，单独打包成一个串口，最终输出。

那除了做这个事呢，他还做了个事啊，还做的事就是。比方说啊，我现在呢，这个文件引入到JS，好，我这里还有个test JS啊。S，对吧，我这里呢，改成多入口啊，我再改回来改成多入口。入口测试完了，我们再测试入口。看他还有什么用啊。Index。是这个值，然后呢，再来个。这是我们的T啊。值呢，叫test。好，我们现在打包啊，我们说了啊，只要是多入口，它一定会打包两个窗口，再加上我这个它应该是三个窗口。打包。他叔叔呢，123没问题啊，三个窗口没问题。好，那么我们把这个先关掉啊，先把这个关掉。

把这个关掉呢，我们前面也知道，它只会输出两个窗口。对吧，两个窗口是不是好，那我们这里测试一下，在这个test中引入，我们把代码制。我们在菜文件中呢，也引入了这块，我们再来打包啊再打包。好，我们直接看这个文件就好了啊，这时候你会发现呢，这两个文件大小呢，都是KB，那么这两个文件的里面都引入了。好了，那么这个的问题啊，就是比如说将来我在A页面需要使用我载一对吧，那么我跳到B页面，也是我同样的一个应用程序的另外一个页面，它也要使用这功率，我又得重复下载一次。那么这样的话呢，就会导致折扣语被重复加载，就会带来新的问题啊，代码的重复加载了。

那我要怎么办呢？诶，我们通常做法都是把JA呢，单独整成一个单独的文件，单独这个文件啊。那么这样呢，我就只要单独加载这个了。是不是？注意，哎，这个呢，同样的all，我们再来运行一次。就正常来讲的话呢，它分割的话呢，我们通俗来讲可能会哎哎，出现四个长短，什么整合率呢，被打爆两次，但实际上呢，是不会的。我们在执行。实际上呢，它只会生成一个ary啊，这两个东西呢，会共用这一个。比如说它会怎么样呢？它会自动分析。多入口。好文集中。中。有没有公共的依赖？公共的文件。如果有。会。

打包成。单独的一个窗口。大概是这样的。当然了，这个这个文件公共的文件大小呢，是有要求的啊，你不能太小啊，是需要稍微大一点，如果你的文件呢，只有1KB左右，那不行啊。啊，至少呢，要超过一个啊，几十KB啊才行啊，就是这个。所以呢，他能做出两件事啊，就是第一件能将S呢单独打包成输出啊，只要是S里面代码都会进行打包的。同时呢，它会分析，如果你是多入口，它会分析你的多入口串口中啊，有没有公共的代码，如果有，它只会打包成单独的一个窗口，而不是多个啊。就不会重复的打包多次。那么这样呢，也是它的一个优点。这是它的优点啊。所以最终呢，我们这些方案啊，并不是说哎，你只能用一或者用二都可以一起用的。如果你的应用呢，是个单页面应用，对吗？诶你加上他的话呢，它可以帮你把not的东西也打包出去。

好，如果你是个多页面应用对吧？是多入口，那么它还会帮你自动分析这多入口里面的公共的依赖，会把它提取成一个串口，就不会重复的去加载一些相应的东西了。同时同时呢，好处在于呢，就是哎啊多入口，他也会帮你去做这个东西，也会单独打包成一个窗口啊也会做。所以呢，这又是第二种方式，加上这个optimization trans well来做这个分割。那么这里面呢，它会用上个创建叫做这插件来对我们代码进行分析的。啊，是这个。那么这是这一块，这是二啊，那么还有最后一种方式。我们来看。M3。好，这三个就是啊，这些东西都做完了啊，都做完了好，那么我们还是要回到正题，正题就是我们将来啊，开发的时候呢，还是这个单页面应用程序来的多啊，多入口的话呢，还是少一些啊。

还是单独好。那么单入口的话呢，我这里面啊，诶。他呢只能做第一件事，单入口的话只能做一件事啊，这多入口第二件事做不了了，他只能将里面的代码呢进行单独打包。但是我们单页应用呢，也希望将这个代码文件呢，除了not Mo文代码，其他代码呢也希望打包，那比方说我就希望将这个T文件给进行单独打包啊，等会我就不看了啊，一会就不看了。我希望将T文件单独打包，但是如果你只是在这里引入，比如说引入这个T。From这个啊。好，当然里面代码呢，我们稍微改一下就不需要了，就不再看了。引入里面的，比如说的方法或者方法，然后呢进行使用啊，当然呢，我就简单打印一下了，我就不我就别的就不做了啊。

好简单使用一下，那么这样的话呢，它的确会打包test，但是呢，它会把T和index打包成一个串口。最终输出成一个文件。我们可以看到。看标的。哎，当然我这是二，我要拿到DEMO3去运行。好，我们再一起啊派。好看B啊，它最终呢，只输出了一个JS，这一个JS呢，包含了我们那个index文件和那个test文件都包含了。而我现在需求是就是想将这个T文件给单独打包成一个串口，这时候怎么办呢？我又不想要多入口，因为多入口要改配置，不想改配置。这时候就会写JS代码。所以还有第三种方式。通过GS的方式。通过。

让某个文件。被单独打包成一个窗口。好代码呢，得这样写啊，得使用一个一种的语法，这个文件路径呢，就是这个T。那么这儿呢，就不需要再引了啊，这就不需要隐藏，这里也不需要打印了。等呢就代表加载成功呗，看不就加载代表加载失败啊。啊，这里很简答一下啊文件啊，文件加载失败。然后呢，方法呢，我们也可以写一个，哎，这就代表文件加载成功。来这里就代表文件成功。是不是下载成功之后啊，我们就会用上这里面的内容啊。

好，我们可以打印一下这个它的里面的一个结果啊result，我们可以把这个结果呢打印输出一下，待会来看一下这个result里面有什么内容。好，那么一旦你使用这种方式啊，注意我们没有再引入test了，它就一定会对这个test文件进行单独打包的，我来看效果再运行。好，最后你看输出结果呢，是有两个JS文件啊，一个是面JS，一个是一点这个JS。其中就是的，这个我们可以验证一下啊，打开看一下。它会有个1.gs，其中这个1.gs呢，往往右边翻一翻，它这里面呢，就有这个MMU方法和这个看方法，就是这个方法了。也就说这个咱们这个T文件呢，就被单独打包了。当然打不了，那么我们来当然代码也可以运行啊，你可以右键运行一下看下效果。那当然，我们不是要运行源代码啊，错了，我们要预习的是构建后代码。

并检查。哎，你会发现呢，它也打印出来了module啊module呢，因为是采用yes module，所以呢，我们要拿里面的内容啊。诶，得直接找到这里面的这个M方法和这个抗方法啊。啊，我们得这样写。啊，如果你找到看方法的话呢，得比如说几何负值，得到里面的这个ul。或者看看。我们把这个M方法呢和看方法呢，可以简单的打印一下第二个M2那个二乘以五，再看一下效果啊。再重新打包一次。上心哎，你看不就打印出来十吗。啊，为什么打印两次呢？呃，是因为。为啥？啊是因为这个加法也是刚好是十啊，我们这里也是十，所以呢，打印了两次啊，所以两个十。这方态。

共分导入语法。啊，能将。啊。帮打包。就这个，所以我们将来如果需要哪个文件单独打包呢，就用这种语法，那么就够了啊，就可以单独打包了。那么最后就单独打包这个名字啊，不太好看，它呢会根据那个ID去命名，这个ID呢，就是每次打包的时候都会是这个ID，并且这个ID呢，随着文件的内容，文件的数量在递增呢，这个ID可能会变啊，不太友好，所以呢，我们希望这个名字是固定的，不应该是这个ID。那么怎么办呢？这里可以加个参数。叫做派。唱name。这个决定的就是他打包的这个名字，比如说叫。那么接下来打包的名字呢，就叫T就不会改了，我们可以把这个JS删掉，再重新打包一次。

重新打包呢，你看它的文件呢，就叫T这个名字了，这个文件呢，就不会随意的变化。所以通过这个注释呢，我们可以给的这个名字一个固定的名字啊。所以这种整理呢，我们有三种方案去做啊，三种方案。其实就最终就是第二种，第三种。首先第一种呢，我们介绍就是我们有单入口和入口啊，你都可以选，单入口呢，输出呢，默认情况下只有一个文件，多入口呢，就有几个入口，就输出几个文件。好，那么第二种情况呢，就是我们可以利用上咱们的一个配置叫optimization SP。好，如果单入口的话呢，它只会分割这个浓代码。如果是多入口的话呢，诶，它除了分析这会分割这个not里面代码以外呢，还会分析你这多入口里面有没有公共的依赖，然后呢，它会单独打成一个窗口。好，所以呢，多入口的话呢，最终呢，就是这样配置。

好，当然多入口，我们说了用的很少，所以说第二种方案用的比较少，我们一般是第三种方案，就是纯粹的。单入口的话呢，加上单入口啊，加上呢，这个optimization这个配置能够保证将nots的代码进行分割。其次，我其他文件呢，也希望单独打包成一个串口，那么就得通过写JS代码的方式去控制。通过import这种动态导入语法，从而能让某个文件打包。然后在这里面给它取一个名字，那就可以了。那么好，那么这以上呢，就是我们整体的一个咱们的一个代码分割的一种方案，那么第三种方案呢，我们就是结合import语法，加上呢，我们这个配置中的optimization这个配置来完成我们所有的代码分割的。从而呢，能让我们加载代码啊，不是一个巨大的一个JS文件，而是拆分成了多个小的JS文件，从而能实现并行加载啊，速度更快。

那么这里呢，就是我们对代码分割的一个啊。写法。