配置split-chunks

开箱即用的 SplitChunksPlugin 对于大部分用户来说非常友好。
默认情况下，它只会影响到按需加载的 chunks，因为修改 initial chunks 会影响到项目的 HTML 文件中的脚本标签。
webpack 将根据以下条件自动拆分 chunks：

  • 新的 chunk 可以被共享，或者模块来自于 node_modules 文件夹
  • 新的 chunk 体积大于 20kb（在进行 min+gz 之前的体积）
  • 当按需加载 chunks 时，并行请求的最大数量小于或等于 30
  • 当加载初始化页面时，并发请求的最大数量小于或等于 30

当尝试满足最后两个条件时，最好使用较大的 chunks。

Warning

选择了默认配置为了符合 Web 性能最佳实践，但是项目的最佳策略可能有所不同。如果要更改配置，则应评估所做更改的影响，以确保有真正的收益。

splitChunks.chunks

string = ‘async’ function (chunk)
这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。

配置

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

  1. module.exports = {
  2.   //...
  3.   optimization: {
  4.     splitChunks: {
  5.       chunks: 'async',
  6.       minSize: 20000,
  7.       minRemainingSize: 0,
  8.       minChunks: 1,
  9.       maxAsyncRequests: 30,
  10.       maxInitialRequests: 30,
  11.       enforceSizeThreshold: 50000,
  12.       cacheGroups: {
  13.         defaultVendors: {
  14.           test: /[\\/]node_modules[\\/]/,
  15.           priority: -10,
  16.           reuseExistingChunk: true,
  17.         },
  18.         default: {
  19.           minChunks: 2,
  20.           priority: -20,
  21.           reuseExistingChunk: true,
  22.         },
  23.       },
  24.     },
  25.   },
  26. };

例子

  1. splitChunks: {
  2.   chunks: 'all',
  3.   minSize: 20000,
  4.   maxAsyncRequests: 30,
  5.   maxInitialRequests: 30,
  6.   enforceSizeThreshold: 50000,
  7.   maxSize: 0,
  8.   cacheGroups: {
  9.     monacoEditor: {
  10.       chunks: 'async',
  11.       name: 'chunk-monaco-editor',
  12.       priority: 22,
  13.       test: /node_modules[\\\/]monaco-editor[\\\/]/,
  14.       enforce: true,
  15.       reuseExistingChunk: true,
  16.     },
  17. }

配置以下后 

  1.           // defaultVendors: {
  2.           //   test: /[\\/]node_modules[\\/]/,
  3.           //   priority: -10,
  4.           //   chunks: 'initial',
  5.           //   reuseExistingChunk: true,
  6.           // },
  7.           // default: {
  8.           //   minChunks: 2,
  9.           //   priority: -20,
  10.           //   reuseExistingChunk: true,
  11.           // },

image.png
没有配置 名字就是chunk-vendors
image.png