webpack打包优化：提取第三方包到公共文件

在使用chrome浏览器控制台的Lighthouse自动化工具测试网站性能时，LCP这一项所用的时间过长，长达17.6s。(LCP Largest Contentful Paint, 网页中最大LCP元素渲染完成所用的时间)

Lighthouse也给出了具体的优化策略，如下：

我今天来针对其中的第三项-Reduce unused JavaScript来进行优化。

可以看到，Lighthouse已经给出了哪些模块在当前页面的LCP阶段是没有被用到的文件，比如lodash、xlsx等公共第三方库。

众所周知，webpack打包后的js资源文件,最终会以script的方式在index.html模板文件中被引入，而这个加载的过程会阻塞浏览器的渲染过程，极大的影响了最大元素渲染到页面的速度(LCP)，直接影响到用户体验。所以，一般会针对js资源文件进行一系列处理，比如压缩文件，剔除运行时文件，启用缓存等。而按照一定条件将第三方库提取到特定公共文件是其中最常见也是最有效的一种。

具体解决方式如下：

module.exports = {
    ... 
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](lodash|xlsx)[\\/]/, // 针对lodash，xlsx提取到以vendor为文件名的公共文件
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    }
}

再次运行打包输出的每一个js资源文件就不会对lodash、xlsx进行重复打包，资源文件的体积也大大较少，反应到实际就是加载资源的速度变快，用户体验得到极大提升。