webpack懒加载(Lazy Loading)和Chunk

webpack.jpg

写在前面

关于wbepack打包懒加载和chunk，其实我们在进行代码分割的时候多少用到过，这篇文章，我们将webpack懒加载做一个较详细的分析讲解

什么是懒加载？

我们回头看一下这两端段代码

import _ from 'lodash'
var element = document.createElement('div')
element.innerHTML = _.join(['a', 'b', 'c'])

function getComponent () {
    return import(/* webpackChunkName:"lodash" */'lodash').then(({ default: _ }) => {
        var element = document.createElement('div')
        element.innerHTML = _.join(['a', 'b', 'c'])
        return element
    })
}

getComponent().then(element => {
    document.body.appendChild(element)
})

上面两端代码实际上实现了同样的功能，但显然，通过同步引入的方式代码更加简洁，但我们为什么还要去那么繁琐的写异步加载的代码呢？那你因为异步加载的代码可以实现一种懒加载的行为，那下面我们就改造一下下面的异步加载的代码，看一看什么是懒加载
index.js

function getComponent () {
    return import(/* webpackChunkName:"lodash" */'lodash').then(({ default: _ }) => {
        var element = document.createElement('div')
        element.innerHTML = _.join(['a', 'b', 'c'])
        return element
    })
}
document.addEventListener('click', () => {
    getComponent().then(element => {
        document.body.appendChild(element)
    })
})

我们对代码做了改造，上面代码中的意思是，只有我们执行点击事件的时候，才会去执行引入的操作，下面我们将代码打包，运行一下看看，这时候再network中，你会发现，当我们刚刷新进入页面的时候，是不去加载lodash这个库的，当我们执行点击事件以后才会去执行，这样，我们就实现了一个懒加载。
Webapck懒加载就是我们通过异步去引入一个模块，该模块到底什么时候引入并不能确定
借助webapck模块懒加载，我们可以页面加载更快，其实在日常使用框架的开发中，懒加载也无处不在，比如路由懒懒加载的概念，其实就是通过异步引用页面组件的方式，对页面组件进行代码风格，最终实现的懒加载，这样会让我们按需加载资源，对于首页的访问速度将大大加快。
因为上面的代码中import()实际上是一个promise，所以我们可以把上面的代码改的更先进一点

async function getComponent () {
    const { default: _ } = await import(/* webpackChunkName:"lodash" */'lodash')
    const element = document.createElement('div')
    element.innerHTML = _.join(['a', 'b', 'c'])
    return element
}
document.addEventListener('click', () => {
    getComponent().then(element => {
        document.body.appendChild(element)
    })
})

通过异步函数的方式，这样会更加先进一点。这就是webpack模块化当中的懒加载

什么是Chunk？

我们在进行代码分割后，会将原本的一个大的main.js拆分成不同的几个文件夹，这样对于每一个文件夹来说，就是一个chunk，从打包的日志输出中，我们也能看到，对于的文件，都有一个chunk的名字

chunk.PNG

这时候我们再回过头来看splitChunksPlugin中，minChunks的含义了，将来的项目中，我们打包出来的文件，会有很多个chunk，其中minChunks就代表至少有几个chunk对一个库做了引用，如不下于这个值，才进行代码分割，否则将不进行代码分割。在明白了chunk以后，相信对于这个参数的理解也更加正确了。

写在最后

本文为大家介绍并实践了两个概念，大家对它们理解后，将对代码分割有一个更全面的认识，这里又一次提到了splitChunksPlugin这个插件，其实对于这个插件来说，我们正常项目中完全采用官方的默认配置就可以，假如你想有一些自定义的分割风格的话，再去改默认配置，所以，我们的splitChunksPlugin就可以配置成这样了

        splitChunks: {
            chunks: "all",
        }

试一试吧~~