问题描述我们的项目完成验收后，需要打包发布上线。于是我们执行命令：npmrunbuild来制作dist包。打包后截图如下：直接打包的chunk-vendors.js太大了。chunk-vendors.js文件太大，需要优化拆分什么是chunk-vendors.jschunk-vendors.js，顾名思义chunk(block/package)-vendors(supplier)，就是:不是自己写的模块包，就是/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')returnreturn{plugins:[//......],//看这里：分包chunk-vendors.js，改进资源加载速度，需要优化：{/***runtimeChunk可选值有：trueor'multiple'or'single'*trueor'multiple'会有一个chunk对应每个entry。但是，一般情况下*考虑到模块的初始化，大部分情况下设置为single就够了。*详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk**/runtimeChunk:'single',/***以前是CommonsChunkPlugin，现在换成了优化。分割块。普通项目下面的配置就够了*详见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks**/splitChunks:{chunks:'all',//可选值：all，异步和初始。all是最强大的函数，所以我们使用allmaxInitialRequests:Infinity,//最大并行请求数，以防万一，设置infinity即可minSize:20000,//只有导入的模块大于20kb时才做代码分割，官方默认20000，不需要修改maxSize:60000,//如果导入的模块大于60kb，告诉webpack尝试拆分cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,//使用正则模式匹配node_modules引入的模块priority:-10,//priority值越大优先级越高，默认-10，无需修改name(module){//设置分包后的文件模块名，按照包名替换为constpackageName=module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]return`npm.${packageName.replace('@','')}`},},},}}}}，总结一下，好记性不如烂笔头，记录一下吧^_^
