之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。
这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。
1.为什么要进行Code Splitting
我们先举一个例子,在index.js中引入lodash。
然后进行打包,我们会发现按照以前的配置,会把lodash和我们的业务代码打包到一起,这其实会有问题:
用户第一次进入页面,会加载main.js(假如是2MB),当业务逻辑发生变化,重新打包上线后,用户进入页面又要重新加载2MB的文件,就会造成浪费。lodash这个库在我们开发过程中,基本不会去改变里面的内容,所以应该把这部分代码单独生成一个js文件,这样业务逻辑变化就不会影响到lodash的代码了。
2.初步Code Splitting
我们新建一个lodash.js,然后在里面引入lodash,并且挂在到window上,然后index.js直接调用lodash的方法。
重新配置entry和output:
重新进行打包,会有两个JS文件。
在这种情况下,用户第一次进入页面,加载两个JS,业务逻辑发生变化重新打包后,lodash.js并不需要重新加载,节约了资源,也节省了一部分时间。
3.利用webpack做Code Splitting
首先重新引入lodash库
然后在webpack.config.js中添加配置项
进行打包,观察打包的文件,除了main.js,还多生成了一个vendor.js文件,我们观察main和vendor发现,main.js里面只有业务逻辑,而vendor里面只有lodash的代码。
使用这个配置项,webpack自动帮我们进行了代码分割。
4.动态引入库
新建一个js文件,增加如下代码。
但是现在webpack对动态引入处于实验性阶段,所以想要打包还要安装一个插件。
cnpm install babel-plugin-dynamic-import-webpack -D
在.babelrc中增加如下配置。
进行打包,打包后发现生成这些文件。
这时,lodash的代码都在0.js中,所以webpack不仅能分割同步引入的代码,还可以分割异步引入的代码。