VueCli3项目打包后，组件被重复引入怎么解决？

Question

使用vue-cli-service build --report打包后，发现elementUI的组件被重复引入了。

请问是什么原因造成的，怎么解决?

1.我使用了VueRouter路由懒加载

{
    path: '/a/:id',
    name: 'a',
    component: () => import('@/views/a')
}

2.babel.config.js是这样配置的

module.exports = {
    presets: ['@vue/app', ['@babel/preset-env', { modules: false }]],
    plugins: [
        [
            'import',
            {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: (name) => `${name}/style/less`
            },
            'vant'
        ],
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ]
    ]
};

3.vue文件中，使用了按需加载。

Answer 1

动态导入 和 Tree shaking 不能同时使用

个人博客也有介绍 优化 web 应用程序性能方案总结