减小vuecli3项目webpack打包后首页入口js文件大小

如题，由于项目越来越大，导致js的体积也越来越大，之前没有仔细管webpack的配置，所以一般打出来的包都有app.js和vendor.js两个文件。由于功能越来越多，vendor.js文件也越来越大，达到了1mb，所以决定着手优化
通过webpack-bundle-analyzer可以看到占大头的主要是iview和tui.editor这两个

那么目标很明确了

1. iview使用umd用script标签引入，可以参考官网，不再赘述
2. 主要是tui.editor
   首页并不需要，所以没必要放在app.js或vendor.js中进行加载，所以可以单独给他开一个cachegroup，配置如下

markdown: {
    name: 'markdown',
    minChunks: 1,
    priority: 30,
    minSize: 0,
    chunks: 'all',
    test(module) {
      // `module.resource` contains the absolute path of the file on disk.
      // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
      const editorList = ['tui', 'highlight', 'codemirror', 'markdown-it', 'plantuml-encoder', 'to-mark']
      return editorList.some(v => {
        return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}${v}`)
      })
    },
  }

几个要注意的细节：

• priority要比vendor高，才能优先处理
• 将跟tui.editor有关的所有依赖都打进去（可以通过查看tui.editor的引用进入源码查看tui.editor依赖了哪些依赖）
  
  
• 将vendor的minSize设置大一些，让vendor让一些比较小的依赖包打进页面中，不用加入进vendor中

最终的cachegroups配置如下

cacheGroups: {
  vendor: {
    name: 'vendor',
    minChunks: 2,
    reuseExistingChunk: true,
    priority: 20,
    minSize: 300000,
    chunks: 'all',
    test: /[\\/]node_modules[\\/]/
  },
  common: {
    name: 'common',
    minChunks: 2,
    reuseExistingChunk: true,
    priority: 10,
    minSize: 30000,
    chunks: 'all',
    test: /[\\/]src[\\/]/,
  },
  markdown: {
    name: 'markdown',
    minChunks: 1,
    priority: 30,
    minSize: 0,
    chunks: 'all',
    test(module) {
      // `module.resource` contains the absolute path of the file on disk.
      // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
      const editorList = ['tui', 'highlight', 'codemirror', 'markdown-it', 'plantuml-encoder', 'to-mark']
      return editorList.some(v => {
        return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}${v}`)
      })
    },
  }
}