代码分割

 一、产生原因：应用经过webpack打包成一个js文件，这个js文件包含了应用自己的业务逻辑和第三方依赖，这个js文件

  很大，当浏览器加载的时候会需要很长时间，影响用户体验

  二、代码分割方式：

    1、入口配置：通过配置多个入口文件

    2、动态导入：js文件中通过使用import()

    3、插件：splitChunks去重和分离

三、具体实现

1、入口配置：通过配置多个入口文件

通过配置多个入口文件，webpack打包生成时，会产生多个chunks，如下图

2、动态导入：js文件中通过使用import()

index.js文件同级目录创建a.js文件，在index.js中利用import()引入

webpack打包时候会自动将a.js文件分离出来，产生两个chunks,

3、插件：splitChunks去重和分离

splitChunks会将被多个模块复用或来自 node_modules 文件夹，并且模块的体积大于等于30kb（压缩之前）的模块进行分离，splitChunk有多个配置项，接下来对每一个配置项进行说明

3.1 chunks

chunks指定了splitChunks作用的对象，有三个值，async，initial和all，默认是async

async：指定了插件只对初始的chunk的引入模起作用，index.js中引入react-dom，react-dom大小大于30kb，属于同步加载的模块，插件在打包时候不会将react-dom，只会产生一个chunk

initial：指定了插件选取同步加载chunk进行代码拆分，index.js中引入react-dom，react-dom大小大于30kb，属于同步加载的模块，插件在打包时候将react-dom分离出来

all：指定了插件对引入所有模块进行代码分割，index.js中异步引入a.js, a.js同步引入react-dom，react-dom大小大于30kb，在initial模式下，react-dom不会被分离

在all模式下，react-dom就可以被分离

3.1 maxInitialRequests

在拆分chunk后，页面中需要请求的初始chunk数量不超过指定的值，默认值是3，在index.js文件中引入react-dom，maxInitialRequests修改为1，

虽然react-dom的大小超过30kb，但是如果分割之后，页面初始化加载时就得加载2个chunks，设置maxInitialRequests为1时，react-dom不会被分割出去

3.3 maxAsyncRequests

splitChunks 在拆分chunk后，并行加载的异步 chunk 数不超过指定的值，默认是5，在index.js动态引入a.js,a.js同步引入react-dom，maxAsyncRequests修改为1，

动态加载a.js时，会同步加载react-dom，如果不设置maxAsyncRequests，插件会将react-dom分割出去，但是设置了最大值1，所有react-dom不会被分割出来，webpack只会根据代码分割第一种和第二种方式分割代码

3.4 minChunks

minChunks 表示一个模块至少应被指定个数的 chunk 引用才能分割。默认为1，index.js中引入react-dom，minChunks设置为2,

虽然引入的react-dom大小大于30kb，但minChunks设置为2，表示只有当react-dom引入数量大于2时才会被代分割