（也是高级用法）

webpack 和code splitting之间的关系

课程目标

code splittin是什么
webpack 和code splitting之间的关系
webpack代码分割的两种方式
使用code splitting的好处
代码分割的配置项的SplitChunksPlugin的配置参数

一、code splittin是什么

code splitting指的是代码分割，Code Splitting能够将代码分割，实现按需加载或并行加载多个bundle，可利用并发下载能力，减少首次访问白屏时间，可以只上线必要的文件。

案例：

在项目中引入lodash第三方包 npm install lodash 它是一个功能集合，提供了很多功能方法，可以让我们高效能的去使用一些字符拼装的一些函数等等
在index.js文件中引入,

import _ from "lodash"
console.log(_.join(['a','b','c'],****))//第一个参数是字符串连接，第二个参数是连接符。
上面打印的结果为a****b****c
打包之后都打包在一个文件夹中了，
就是我在index.js的写的业务逻辑非常多，当用户使用时，当mian.js文件加载完之后，
才会去执行我的逻辑代码

使用这种方式进行打包会产生问题

打包文件会很大，加载时间会很长
当我们修改我们的逻辑代码之后，他是重新访问我们的页面，还要重新加载main.js文件，和内容

解决方法（就是采用代码分割）

手动的实现代码分割：

在src文件下新建一个lodash.js文件
将在index.js文件中引入的import _ from "lodash"，放到lodash.js文件中。

lodash.js文件的配置
import _ from "lodash"
window._=_

找到webpack.common.js文件夹进行配置

entry:{
    lodash:./src/lodash.js
    main:"./src/index.js"
}

打包生成两个js文件，一个为main.js和lodash.js文件，它是将main.js分成了lodash.js和main.js文件
优点：当页面业务逻辑发生变化时，只要加载main.js即可，加快页面的加载速度

二、webpack 和code splitting之间的关系

代码分割和webpack无关,我们在使用 webpack 的时候，一般都会使用 code splitting。因为webpack 中有一些插件可以让我们非常容易地进行 code splitting。在 webpack4 中有一个插件：splitChunksPlugin，并且它直接与webpack 做了捆绑。不需要安装，直接可以配置使用。

三、webpack代码分割的两种方式

webpack中的代码分割的方式一：

配置同步代码：只需要在webpack.common.js中做optimization的配置即可

entry:{
    //lodash:./src/lodash.js
    main:"./src/index.js"
}
在webpack.common.js文件中配置
optimization:{
    spliChunks:{
        chunks:'all'//帮我们做代码分割
    }
}
打包之后生成了一个vendors~main.js文件和main.js文件在dist文件下，
vendors~main.js里面有lodash文件内容

webpack中的代码分割的方式二：

异步代码：(import这种引入的模块代码)，异步代码,无需做任何配置，会自动进行代码分割，放置到新的文件中.

注意：在使用方式二打包是会产生问题，请看下面的解决方式

在index.js中异步加载lodash文件

function getComponent(){
    //打包时并不支持下面的这种语法
    return import ('lodash').then(({default:_})=>{
        var element = document.createElement('div')
        element.innerHTML = _.join(['Dell','Lee'],'-')
        return element
    })
}
//执行函数
getComponent().then((element)=>{
document.body.appendChild(element)//将element挂载到body上
})

打包产生的问题：

打包时并不支持上面的这种语法，所以需要一个插件来解决，babel-plugin-dynamic-import-webpack

npm install babel-plugiin-dynamic-import-webpack

配置一下这个文件，在babelrc文件中
plugins:['dynamic-import-wewbpack']

打包生成一个0.js文件，就等同于vendors~lodash.js 存放的是lodash文件

四、使用code splittiing的好处

提高代码执行的性能
提高用户的体验
减少首次访问白屏时间

五、代码分割的配置项的SplitChunksPlugin的配置参数

webpack.common.js文件中的optimization中的参数配置

optimization:{
    splitChunks:{
        chunks:'async',//只对我的异步请求代码做分割,
        'all'对同步和异步代码都进行分割
        minSize:30000,//大于30000才进行代码分割，小于就不进行代码分割
        maxSize:0,//可配可不配，
        minChunks:1,//当一个模块被用了几次之后才会做代码分割
        maxAsyncRequest:5,//同时加载的模块树只能是5个
        maxInitialRequests:3,//整个网站首页或入口文件进行加载时，
        入库文件如果引入文件，入口文件做代码分割只能分割成3个js文件，超过三个不会做代码分割
        automaticNameDelimiter:'~',//文件生成的时候，文件之间有一些连接符， 
        name:true,//打包生成的文件名有效
        //和上面chunks来进行搭配使用
        cacheGroups:{//当我打包同步的代码是上面的参数有效，打包生成到哪个组的配置
            vendors:{
                test:/[\\/]node_modules[\\/]/,
                //代表的是引入的库是不是在node_modules的依赖下
                priority:-10,
                //会进行比较，那个优先级高就会把打包的文件放到那个组，
                比如和default的组进行比较，-10比-20的优先级高所以回放到我的vendors.js文件里面
                filename:"vendors.js"//这是打包之后生成的存放lodash.j文件的文件，生成的文件名为vendors.js;如果不配置filename，他
                会自动生成一个为vendors~main.js文件
            },
            default:false
            //default还可以配置
            default:{
                priority:-20,
                reuseExistingChunk:true,//如果一个模块被另一个模块引入，说明已经被打包过了，在打包的时候就使用已经打包过了的文件，不会重新再打包
                filename:'common.js'//打包之后生成的文件名
            }
        }
    }
}

详细内容请看官网 webpack.js.org/api/node/#w…

Webpack 12 之webpack 和Code Splitting之间的关系和配置项SplitChunksPlugin的配置参数