umi项目中webpack打包vendors文件过大

Question

umi打包会将第三方组件全都打包到vendors文件中去，但是有可能那个组件不是初始就会用到，我想在第一次用到的时候再去加载，vendors可以集成第三方包，但是希望某些组件不要打包进去了，其关系如下图所示：

我想尝试采用import("path")的方式来按需加载，但是组件并没有export default，因此失败了，不知道有没有配置能解决这个问题

Answer 1

其实这个问题我已经解决得差不多了，没有想到还有人关注了该问题，因此我将我的方法写出来供大家参考，其实是用chainWebpack的方式来处理。

//umirc.js[ts]
chainWebpack(config){
    config.merge({
        optimization: {
            minimize: true,
            splitChunks: {
                chunks: 'async',
                minSize: 30000,
                minChunks: 2,
                automaticNameDelimiter: '.',
                cacheGroups: {
                    vendor: {
                        name: 'vendors',
                        test: /^.*node_modules[\\/](?!ag-grid-|lodash|wangeditor|react-virtualized|rc-select|rc-drawer|rc-time-picker|rc-tree|rc-table|rc-calendar|antd).*$/,
                        chunks: "all",
                        priority: 10,
                    },
                    virtualized: {
                        name: "virtualized",
                        test: /[\\/]node_modules[\\/]react-virtualized/,
                        chunks: "all",
                        priority: 10
                    },
                    rcselect: {
                        name: "rc-select",
                        test: /[\\/]node_modules[\\/]rc-select/,
                        chunks: "all",
                        priority: 10
                    },
                    rcdrawer: {
                        name: "rcdrawer",
                        test: /[\\/]node_modules[\\/]rc-drawer/,
                        chunks: "all",
                        priority: 10
                    },
                    rctimepicker: {
                        name: "rctimepicker",
                        test: /[\\/]node_modules[\\/]rc-time-picker/,
                        chunks: "all",
                        priority: 10
                    },
                    ag: {
                        name: "ag",
                        test: /[\\/]node_modules[\\/]ag-grid-/,
                        chunks: "all",
                        priority: 10
                    },
                    antd: {
                        name: "antd",
                        test: /[\\/]node_modules[\\/]antd[\\/]/,
                        chunks: "all",
                        priority: 9
                    },
                    rctree: {
                        name: "rctree",
                        test: /[\\/]node_modules[\\/]rc-tree/,
                        chunks: "all",
                        priority: -1
                    },
                    rccalendar: {
                        name: "rccalendar",
                        test: /[\\/]node_modules[\\/]rc-calendar[\\/]/,
                        chunks: "all",
                        priority: -1
                    },
                    rctable: {
                        name: "rctable",
                        test: /[\\/]node_modules[\\/]rc-table[\\/]es[\\/]/,
                        chunks: "all",
                        priority: -1
                    },
                    wang: {
                        name: "wang",
                        test: /[\\/]node_modules[\\/]wangeditor[\\/]/,
                        chunks: "all",
                        priority: -1
                    },
                    lodash: {
                        name: "lodash",
                        test: /[\\/]node_modules[\\/]lodash[\\/]/,
                        chunks: "all",
                        priority: -2
                    }
                }
            }
        }
    });
    //过滤掉momnet的那些不使用的国际化文件
    config.plugin("replace").use(require("webpack").ContextReplacementPlugin).tap(() => {
        return [/moment[/\\]locale$/, /zh-cn/];
    });
}

其中一些依赖是在打包时根据环境变量ANALYZE=1来分析哪些组件被打包到vendors文件中了，然后通过拆分来减少vendors文件的大小，特别是moment会将所有的国际化文件都打包进去，因此通过replacePlugin来过滤掉不使用的国际化文件

Answer 2

请教 我把你这个配置用到项目中，除了vendors能打包成功，别的都报错，类似这种file ant.js don't exists in chunksMap，我不知道是哪里有问题