00:02
前面呢,我们考虑的都是多入口的一个情况,那么现在我们再来考虑单入口,因为开发的时候呢,我们可能是单页面用SPA应用,那么只有一个入口文件,那么我们配置就要还原成之前的配置了,首先把入口呢改成只有一个入口,同时咱们的这个optimization呢,只需要写串串二就好了,剩下的用默认值就OK了。为什么我们没有配置组中的default呢?因为default main为二,这里要求我们在不同的入口文集中至少被引用两次,也就说至少得有两个入口文件,而我们是单入口,所以这个条件其实满足不了啊,我们没必要去配置的。好,上面这个呢,它默认就有这个配置,我们直接默认用就好了。所以实际做的时候,我们就只需要这样写就够了。好,那么我们把这个最终配置呢,因为我们最终开发的脚手架呢,是单入口的形式,所以我们把这配置就加到我们的最终的里面来,来到我们的。
01:06
之前的配置文件中来,我们打开它。OK,在这里面呢,我们要做的就是追加这个spli。Chance为二。就好了,那么他就会做一些我们所谓的代码分割操作。其他的都用默认值即可。好了,那么这种操作呢?他会做什么事呢?就是如果我们将来用上的no Mo代码,它会把no Mo代码打包成单独的一个JS文件。这是第一,然后呢,其次第二个,如果我们用上了动态导入语法,他也会把动态导入语法的那个文件呢,打包成单独的文件,这样就可以了。
02:03
好,我们可以测试一下,现在呢,我们应该是所有代码呢,目前啊NPM啊。这是我们最开始的配置啊,他目前呢,他应该会打包的时候还是只打,所有代码都打包到一个文件中了,就是这个魅中了。我们打包稍等。OK,还是打包到一个文件中好,那这时候呢,我们做些处理啊,我们假使我们希望这个。MMU就这个MMU函数嘛,我们希望这个MU函数呢,是我们点击的时候再去用,对吧,不要一上来就加载,那么这时候我们要改造一下代码,第一个我们要给我们的这个HL页面啊,追加一个按钮。然后呢,取个店名,方便我们好找到他。同时改变这个代码。
03:00
来。Document。对。找到我们这个按钮点。在这个函数里面呢,我们去执行这句话啊,去引入它。动态引入。点好点灯,那么这里面呢,我们可以直接解构得到我们想的方法看。啊,当然不是,看法是U记错了。然后呢,我们在这里就直接可以计算,那么因为加载不会失败,所以我们就不写cash了。好了,那么之前的这个M与L这些方法呢,就给删掉了。
04:03
这时候呢,它会有一个yes报错啊,因为yes不识别这个。这个不能识别动态导入语法,需要额外增加配置。那么配置就是我们需要在it r里面再加一个差距的配置。啊,让他支持这个动态导入语法import。OK,这样就可以了,这个是解决这个动态导入语法。这样呢就能识别啊,这个插件呢,其实它就会给我们添加很多规则啊,允许我们import在任意的位置上到处写,所以我们就够了。呃,那么这样呢,我们就不会报错了,此时我们再打包的话,诶就不一样了,它至少会生成两个JS文件,一个还是我们的面JS,还有一个就是我们打包生成的这个MAS。
05:10
喂,诶,你看他打包了两个文件啊,还有一个是叫什么587什么什么好,这时候我们再去运行打包后的资源,一上来的这个五八七点GS是不会加载的,因为我们一上来没有点按钮。我们刷新一下。我们观察这个啊,一上来加载资源是没有这个JS的,这个JS是点击的时候诶才会加载。对吧,从而实现按需加载,同时点击之后它就会打印这个计算结果。好了,所以这就是我们现在讲度下需要用的配置啊,来看做什么事,我们就是加了个KI串为all这样的一个配置代码分割,它呢,仅能将no Mo代码提取成单独的一个串,只是我们现在没有用上no Mo代,所以它这里没有体现啊,未来呢,只要我们用上no MOS代码,它会打包成单独的一个文件,其次就是如果我们有些动态导入语法。
06:05
比方说现在我这样写的动态导语法,它一定会被单独打包成一个单独文件的。像这种动态导入语法呢,如果你进行过项目开发可能会知道,比方说我们在路由的动态导入啊,那么用的就是这个import语法,所以那里呢,就会将代码进行分割,打包成单文件,所以从而实现路由的按需加载。好了,这里呢,就是我们的这个。啊,现在目前的这个配置。
我来说两句