[React-章节4]webpack的代码分割与公共代码提取

接着上篇《如何为react导入css和img?》 来说,对于一个多页面应用来说,webpack会把每个entry独立编译成chunk,也就是生成一对js和css文件。如果2个chunk代码都引用了同样的库(例如jquery),那么jquery代码会被分别打包进入2个chunk中,导致js文件尺寸增加,是一个不必要的冗余。

另外,我也猜想对于单页面应用来说,本身是不需要切换html页面的,所以貌似不存在加载多个不同chunk的需求。但是,如果单页应用比较大,那么1个bundle.js文件也会非常大,下载花费的时间就比较长,如果能把它切成几份并行下载也许也是个优化。

自动提取公共js,css

webpack库自身携带了几个常用的插件,这次要用到其中的CommonsChunkPlugin。它的作用是自动提取几个chunk中引用的相同模块到独立的文件中,这样可以实现多个chunk并行加载,从而提速。

CommonsChunkPlugin插件的原理介绍参考博客:怎么打包公共代码才能避免重复?

插件本身配置并不复杂,只需要修改webpack.config.js。在头部require引入webpack模块,在plugins部分new一个插件对象进行配置即可。

这里,我配置了这个公共chunk的名字叫做commons,而filename表示提取的js文件的命名方式([name]其实就是commons);minChunks我配置为2的意思是只要相同模块在2个chunk中同时出现就提取出来,因为我只有a和b两个模块,为了看到效果所以配置了数字2;chunks配置表示提取a和b这两个chunk的公共模块。

配置之后,可以webpack编译一下,会发现磁盘上多了bundle-commons-d919c270.js和bundle-commons-d919c270.css两个文件,而原先的bundle-a-xxxx.js和bundle-b-xxxx.js变得非常小了,说明公共代码已经全部被提取到commons这个chunk里了。

值得注意的是,原先的bundle-a-xxx.css和bundle-b-xxx.css全都不见了,却多了一个bundle-commons-xxx.css,说明CommonsChunkPlugin插件也可以提取公共css文件(别忘了webpack一切皆模块,包括css和img)。同时,因为在我的项目里,a和b两个chunk都是同一套代码,所以经过提取之后a和b就没有非公共的css文件了,所有的css都进入了commons。

自动引入公共模块

CommonsChunkPlugin插件只是分析和提取多个chunk之间公共js和css,就像ExtractTextPlugin只是帮我们把1个chunk里的所有css提取到一个独立文件中一样,它们的产出物并不会自动引入到index.html中。

这里,我们继续借助之前学习的HtmlWebpackPlugin插件,它可以帮我们自动引入CommonsChunkPlugin提取的公共js,css到生成的index.html中。

配置方法并没有什么新的花样,因为CommonsChunkPlugin提取的js和css都被归属于commons这个chunk,因此只需要让HtmlWebpackPlugin的chunks配置中额外包含commons这个chunk,最终生成的html中就会包含引入的相关代码了,完整配置如下:

访问localhost:8080/b_index.html,也就是访问b这个chunk(entry),可以看到所有的css都被提取到了commons里,而js文件有属于chunk b的,也有提取到chunk commons中的:

通过该篇的学习,应该感觉对webpack的常见用法有一个整体的把握了。接下来,我会学习react-router,从而能够轻松的编写单页应用!

 

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~