问题背景

我知道，通过CommonsChunkPlugin 可以将 entry 的入口文件中引用多次的文件抽离打包成一个公用文件，从而减少代码重复冗余

    entry: {
        main: './src/main.js',
        user: './src/user.js'
    },
    ......
    new webpack.optimize.CommonsChunkPlugin({
        name: "commons",
        filename: 'common.js',
        minChunks: 2,
    })
    
    // 打包生成一个文件common.js ,包含main.js 和 user.js 中引用两次及以上的模块代码

那么当我使用了 vue-router 代码分割 懒加载的时候，每个路由对应的.vue文件中，共同引用了多次的模块，怎么自动抽离出来。

问题描述

懒加载路由文件

const
    Index = () => import(/* webpackChunkName: "index" */ "page/index/Index.vue"),
    User = () => import(/* webpackChunkName: "userIndex" */ "page/user/Index.vue"),
    UserDetail = () => import(/* webpackChunkName: "userDetail" */ "page/user/Detail.vue"),
    ...

// page/index/Index.vue 首页路由文件
<template>首页</template>
<script>
    import pub from 'script/public'
    ...
</script>

// 用户页
// page/index/Index.vue 用户页路由文件
<template>用户页</template>
<script>
    import pub from 'script/public'
    ...
</script>

上述使用了vue-router懒加载打包出来的 首页路由文件index.js 和 用户页文件userIndex.js 都会包含一份 public.js的代码，重复了。

我的问题就是，在代码分割的代码中，怎么自动抽离公共代码？ 就像CommonsChunkPlugin的效果一样，或者说CommonsChunkPlugin怎么在 code-splitting 的场景上使用？