vue-cli3中的vue.config.js文件怎么配置，使得chunk-vendors被分离，以给不同的页面引用？

[wangyongjie]

Version

3.1.0

Reproduction link

Node and OS info

v8.11.3

Steps to reproduce

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怎么配置才能实现把vue，vue-router等公用的打包成chunk-vendors，而各个页面再打包自身所需要的chunks，就如打包成三个chunks： chunk-vendors.js (index.html 和mobile.html 都引用） ，chunk-index.js(index.html引用）, chunk-mobile.js（mobile.html引用）？

What is expected?

减少mobile.html加载的大小,chunk-vendors被分离

What is actually happening?

参看其他步骤

[wangyongjie]

vue.config.js 配置的多页面是这样的：
pages: {
mobile: {
entry: 'src/pages/mobile/main.js',
template: 'public/mobile.html',
filename: 'mobile.html'
},
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}

[fengxinming]

同上，被坑了一把，试了很多方法都不行，vendors都不生成了

[ChenSee]

同上，搞得样式都错乱了。。。样式都加在一起了

[sunlyJune]

configureWebpack.optimization.splitChunks.cacheGroups 配置方案如下生效，,尝试分离muse-ui和vuetify

configureWebpack: {
    performance: {
      hints:false // 取消打包文件过大的警告
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
    optimization: {
      splitChunks: 
        minSize: 30,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 5,
        automaticNameDelimiter: '~',
        name: true,
        chunks: 'all', // initial(初始块)、async(按需加载块)、all(默认，全部块)
        cacheGroups: {
          default: false,
          vendor: {
            test (module) {
              let path = module.resource
              if (!path) return true
              path = path.replace(/\\/g, '/')
              let isNeed = path && 
                  /node_modules/.test(path) && 
                  /node_modules\/(?!vuetify)/.test(path) &&
                  /node_modules\/(?!muse)\n*/.test(path)
              if (!isNeed && path.indexOf('node_modules') > -1) {
                console.log('vendor not need::', path, isNeed)
              }
              return isNeed
            },
            name: "chunk-vendors",
            priority: 10,
            enforce: true
          },
          vuetify: {
            test (module) {
              let path = module.resource
              if (!path) return false
              path = path.replace(/\\/g, '/')
              // return path && path.indexOf('node_modules') > -1 && path.indexOf('vuetify') > -1
              return path && /node_modules\/vuetify/.test(path)
            },
            name: "chunk-vuetify",
            priority: 9,
            enforce: true
          },
          muse: {
            // test: (/node_modules/ && /muse\n*/),
            test (module) {
              let path = module.resource
              if (!path) return false
              path = path.replace(/\\/g, '/')
              return path && /node_modules\/muse\n*/.test(path)
            },
            name: "chunk-muse",
            priority: 8,
            enforce: true
          },
          common: {
            name: "chunk-common",
            minChunks: 2,
            minSize: 30000
          }
        }
      }
    }
  }

[IEfucker]

请问题主的问题解决了吗，感觉vue-cli3提供的和单独使用webpack打包结果不一样呢

[H-Sven]

请问题主解决了这个问题吗

[yinsang]

webpack 会默认给commonChunk打进chunk-vendors。所以需要对webpack的配置进行delete

chainWebpack: config => {
  config.optimization.delete('splitChunks')
}

[weituotian]

@yinsang
这样子就没了vendor了怎么办？

  File                           Size                  Gzipped

  dist\js\front.531f6826.js      250.67 KiB            86.37 KiB
  dist\js\admin.e5621a73.js      199.60 KiB            67.72 KiB

[yinsang]

@yinsang
这样子就没了vendor了怎么办？

  File                           Size                  Gzipped

  dist\js\front.531f6826.js      250.67 KiB            86.37 KiB
  dist\js\admin.e5621a73.js      199.60 KiB            67.72 KiB

首先要想明白你需要什么，若是vue.min.js之类的可以用script src引入
若是一定要生成vendor，可以设置webpack 的chunk个数/函数筛选 配置何时打包。
https://webpack.js.org/plugins/commons-chunk-plugin/#passing-the-minchunks-property-a-function

[weituotian]

@yinsang 可不可以做到front有一个verdor，admin也有一个verdor，它们专门存放node_modules的包，然后这两个verdor中的公共部分放在common-verdor中？

[yinsang]

@yinsang 可不可以做到front有一个verdor，admin也有一个verdor，它们专门存放node_modules的包，然后这两个verdor中的公共部分放在common-verdor中？

https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3
这个可能帮到你。主要还是制定好规则分组。

[weituotian]

@yinsang 可不可以做到front有一个verdor，admin也有一个verdor，它们专门存放node_modules的包，然后这两个verdor中的公共部分放在common-verdor中？

https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3
这个可能帮到你。主要还是制定好规则分组。

好，有用，研究下，Thanks

[neilzhang618]

我最近也有类似的需求，研究了下实现了。写了篇文章。请见：

https://juejin.cn/post/6900934461660069902