复习webpack4之Code Splitting

以前学习过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不只能分割同步引入的代码，还能够分割异步引入的代码。