Webpack打包优化（2）

将第三库分割成多个文件

• 利用浏览器缓存
• HTTP2 并发数量没有限制

使用SplitChunksPlugin进行手工分割

• optimization.splitChunks
  https://webpack.docschina.org/plugins/split-chunks-plugin/

splitChunks=[
 maxInitialRequest:Infinity,
 maxSize:0,
 chunks:'all',
 cacheGroups:{
  antVendor:{
    name :'ant-design',
    test:/[\\/]node_modules[\\/](ant-design-vue)[\\/]/,
  },
  vendor:{
  name :'vendor',
  test:/[\\/]node_modules[\\/](!ant-design-vue)[\\/]/,
  }
 }
]

根据文件大小自动分割

splitChunks=[
 maxInitialRequest:Infinity,
 maxSize:300*1024,
 chunks:'all',
 cacheGroups:{
  antVendor:{
  test:/[\\/]node_modules[\\/]/,
name(module):{
const packageName=module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.{packageName.replace('@','')`
}

  }
 }
]