vue-cli3中vue.config.js配置多页面，如何使chunk-vendors被分离，以给不同的页面引用？

Question

1、vue-cli3中，在vue.config.js文件中配置了pages参数进行多页面开发，pages参数中的chunks采用默认配置。
2、进行npm run build 后，打包后，dist文件夹中有两个入口 index.html 和mobile.html . 而这两个html都引用了同一个chunk-vendors。
3、由于index页面是全局引用element-ui的，所以导致chunk-vendors文件特别大。但是mobile页面是不需要引入element-ui的。
4、请问vue.config.js怎么配置才能实现各个页面打包自身所需要的chunks， 比如mobile.html引入的是mobile-chunk-vebdors.js,而index.html引入的是index-chunk-vebdors.js？

Answer 1

直接贴代码
在vue.config.js中添加

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      cacheGroups: {
          vendors: {
              name: 'chunk-vendors',
              minChunks: 4,
              test: /node_modules/,
              priority: -10,
              chunks: 'initial'
          },
          common: {}
       }
    });
  }
};

Answer 2

最近遇到了和你问题类似的情况。
我目前想到的解决办法是使用splitChunks，把需要的内容分别提出来，在你这个例子里就是把element-ui提取出来放到index-chunk-vendors.js。然后在html-webpack-plugin的chunks按需配置就可以了。
如果你已经解决了的话，希望能给说下是怎么解决的，谢谢?

Answer 3

大佬请问这个问题你解决了吗？我最近也遇到了这个问题