webpack code splitting 优化

这篇文章提供了这样一段代码，应该是它认为的最佳实践：

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },

这段代码会将 node_modules 里的依赖分割成一个个文件，并提供一个友好的文件名。但是，就我个人来说不是很喜欢过多的文件，只是希望将比较大的几个包单独打包出来，然后将剩下的 modules 单独打包成一个 vendor 文件。

找到了另一篇资料，按照上面的做法优化了一下，打包结果重要按设想推进了一点。

awesome-bookmarks: webpack

具体来说，就是把比较打的第三方依赖单独打包出来，并不是什么艰难的事情。目前使用的设置如下：

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 30000,
      minChunks: 1,
      cacheGroups: {
        libs : {
          test: /[\\/]node_modules[\\/]/,
          priority: 0,
          name: 'chunk-libs',
        },
        iview: {
          name: 'chunk-iview',
          priority: 1,
          test: /[\\/]node_modules[\\/]iview[\\/]/,
        },
        echarts: {
          name: 'chunk-echarts',
          priority: 1,
          test: /[\\/]node_modules[\\/]echarts[\\/]/,
        },
        moment: {
          name: 'chunk-moment',
          priority: 1,
          test: /[\\/]node_modules[\\/]moment[\\/]/,
        },
        d3: {
          name: 'chunk-d3',
          priority: 1,
          test: /[\\/]node_modules[\\/]moment[\\/]/,
        },
        default: {
          name: 'chunk-default',
          priority: -1,
          minChunks: 2,
          reuseExistingChunk: true,
        }
      }
    }
  }

其中 priority 的大小代表优先级，如果模块同时满足两个规则，会被 priority 较大的模块打包进去；
可以看到上一篇文章有 filename 这个属性。这个属性是不能随便设置的。按照 webpack 的提示，不是init的模块设置后会报错
修改之后出现了 css import order warning，具体请看 #25

这部分处理完之后，还希望优化的点有两个：

把大量单独的css文件合成一个或者数个。
考虑到入口有近3M之多，其中有大约1M的文件是首屏不需要加载的，这一部分需要优化掉。

Hilshire / blog

webpack code splitting 优化 #24