关于webpack:项目性能优化之给dist文件夹中chunkvendorsjs做splitChunks分包从而减少首屏加载时间

问题形容

咱们我的项目做完，验收通过当前，就须要打包公布上线啦。于是咱们执行命令：npm run build打 dist 包，打包完当前截图如下：

间接打包的 chunk-vendors.js 太大了

chunk-vendors.js文件太大了，所以咱们须要将其优化一下，拆分一下

chunk-vendors.js 是啥

chunk-vendors.js，顾名思义 chunk(块 / 包)–vendors(供应商)，即为：不是本人写的模块包，也就是/node_modules 我的项目目录的所有模块包。所以这个 chunk-vendors.js 文件大的起因其实就是，咱们把第三方的包都打包在这一个文件上了，都糅在一块，必定大啊，所以想方法把其做一个拆分。

应用 optimization.splitChunks 做分包

咱们先看一下分包拆分当前打包的 dist 文件夹中的 js 文件大小

分包当前的效果图

这样的话，咱们就把 chunk-vendors.js 文件由，原来的 824kB 拆分成一个个几十 KB 的包文件了，这样的话，生产环境加载的时候，就会快一些

splitChunks 分包代码

咱们以 vue 为例，在 vue.config.js 文件中退出以下代码。代码大家间接复制粘贴即可应用，也是笔者本人在生产环境中应用的哦。

    configureWebpack: config => {if (process.env.NODE_ENV !== 'production') return
        return {
            plugins: [// ......],
            // 看这里：把 chunk-vendors.js 进行分包，晋升资源加载速度，很有必要
            optimization: {
                /**
                 * runtimeChunk 可选值有：true 或 'multiple' 或 'single'
                 * true 或 'multiple' 会有每个入口对应的 chunk。不过个别状况下
                 * 思考到要模块初始化，设置为 single 就够少数状况下应用啦。* 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
                 * */
                runtimeChunk: 'single',
                /**
                 * 以前是 CommonsChunkPlugin，当初换成 optimization.splitChunks。一般我的项目下方的配置就足够用啦
                 * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
                 * */
                splitChunks: {
                    chunks: 'all', // 可选值：all，async 和 initial。all 性能最弱小，所以咱们就应用 all
                    maxInitialRequests: Infinity, // 最大并行申请数，为了以防万一，设置无穷大即可
                    minSize: 20000, // 引入的模块大于 20kb 才做代码宰割，官网默认 20000，这里不必批改了
                    maxSize: 60000, // 若引入的模块大于 60kb，则通知 webpack 尝试再进行拆分
                    cacheGroups: {
                        vendors: {test: /[\\/]node_modules[\\/]/, // 应用正则匹配 node_modules 中引入的模块
                            priority: -10, // 优先级值越大优先级越高，默认 -10，不必批改
                            name(module) { // 设定分包当前的文件模块名字，依照包名字替换拼接一下
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                return `npm.${packageName.replace('@', '')}`
                            },
                        },
                    },
                }
            }
        }
    },

总结

好忘性不如烂笔头，记录一下吧^_^