问题形容
咱们我的项目做完，验收通过当前，就须要打包公布上线啦。于是咱们执行命令：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('@', '')}` }, }, }, } } } },总结
好忘性不如烂笔头，记录一下吧^_^