// 看这里:把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('@', '')}`; } } } } }
标签:node,vue2,modules,single,webpack,optimization,模块,分片,打包 From: https://www.cnblogs.com/ljt-8961/p/18432729