webpack实现code splitting,提升项目加载速度

1、实现代码code splitting的好处

　　1-1、在项目中项目代码大小为1m，引入的模块为1m，总共大小为2m，都打包在main.js，初次请求项目大小为2m，如果改了项目代码中的一部分，由于都在main.js中，再次刷新，还是请求2m，请求缓慢。

　　1-2、使用code splitting后，项目代码跟引入模块代码打包成多个文件，项目大小为1m，引入模块为1m，初次请求为2m，如果改了项目中的代码，只会改变main.js中的代码，模块分割出的1m代码代码没有改变，刷新浏览器，1m的模块代码不用请求，从浏览器缓存中读取，只需要请求1m的项目代码，节省了项目的请求时间。

2、使用不同入口实现代码的code splitting

yarn add lodash

1、src/lodash.js
import _ from 'lodash'

2、src/main.js
console.log(_.join([1,2,3],'-'))

3、webpack.config.js部分配置
module.exports={
 entry: {
        lodash:'./src/lodash.js',
        main: './src/main.js'
    },
}

总结:可以看见项目中dist生成lodash.js和main.js两个文件,code splitting成功

3、删除src/lodash.js及webpack.config.js中的lodash入口配置,使用webpack自带配置自动实现code splitting

1、src/main.js
//1.1、同步引入方式
import _ from 'lodash'
let data = _.join([1, 2, 3], '-')
console.log(data)
//1.2、异步引入方式
function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        let dom = document.createElement('div')
        dom.innerText = _.join([1, 2, 3], '_')
        return dom
    })
}
getComponent().then(element => {
    document.body.appendChild(element)
})
//1.3、es6异步引入方式
async function getComponent() {
    let { default: _ } = await import(/*webpackChunkName:"lodash"*/'lodash');
    let div = document.createElement('div')
    div.innerHTML = _.join(['a', 'b', 'c'], "-")
    return div
}
document.addEventListener('click', () => {
    getComponent().then(element => {
        document.querySelector("#root").appendChild(element)
    })
})

2、webpack.cong.js 部分配置
optimization: {
        splitChunks:{
            chunks:'all'
        }
 }

总结:可以看见dist自动生成了lodash.js,code splitting 配置成功