业务上用到了antd-vue跟element-ui两个组件

业务上用到了antd-vue跟element-ui两个组件,但是element-ui只有一个页面用到。有什么办法打包出来chunk-vendor只有antd-vue的包,加载到使用到element-ui的页面才加载element-ui的包。
有一点很奇怪。我在业务中使用到了VXETable,然后在对应的路由组件上使用Vue.use(VXETable),这样打包出来的chunk-vendor是没有VXETable的,但是同样的方法使用elemeng-ui就失效了。

听说 element-ui 是可以局部注册的。
另外css可以直接在index.html 里面引用,可以不在main.js里面引入。

你也可以通过按需引入的方式来使用element-ui的部分组件来适量加载

目前我是采用在element-ui按需加载的形式进行打包,唯一不同的地方是将Vue.use(Element)从main.js中移动到具体页面中,最终出来的chunk-vendor要少很多

单入口的话按需加载就行了。

多入口的话可以参照下面的试试:
可以把element-ui单独打包成 chunk-element形式。
需要删除默认的splitChunk配置,自己配置一下

删除默认配置 chainWebpack

config.optimization.delete("splitChunks");

手动配置 configureWebpack

config.optimization = {
      splitChunks: {
        cacheGroups: {
          // 重写chunk-common
          common: {
            name: "chunk-common",
            chunks: "initial",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true
          },
           // 重写chunk-vendors
          vendors: {
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            chunks: "initial",
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
        // 单独打包element
        element: {
            name: "chunk-element-ui",
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: "all",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
    }
}

vue.config.js配置在该入口的chunks中添加chunk-element-ui

chunks: ['chunk-vendors', 'chunk-common','chunk-element-ui', 'index']