Custom webpack config sing-spa angular with another plugin or optimization config not working

Question

In single-spa-angular webpack the MFE deployment works only with

extra-webpack.config.js

   module.exports = (config, options) => {
     const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

     // Feel free to modify this webpack config however you'd like to
     return singleSpaWebpackConfig;
   };

But with this build only main.js is generating with huge size. Not sure why vendor.js not generating. I am doing a production build with below config

angular.json

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/app-name",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "app-name",
              "libraryTarget": "umd"
            },
            "deployUrl": "http://localhost:4200",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "rxjs",
              "qs",
              "uuid/v4",
              "moment",
              "lodash.debounce",
              "moment-timezone"
            ],
            "assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
            ],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": true,
            "sourceMap": true,
            "optimization": true,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "optimization": true,
              "aot": true,
              "outputHashing": "none",
              "sourceMap": true,
              "namedChunks": true,
              "commonChunk": false,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true,
              "preserveSymlinks": true,
              "stylePreprocessorOptions": {
                "includePaths": ["src"]
              }
            },
            "development": {
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": true,
              "namedChunks": false,
              "vendorChunk": false,
              "buildOptimizer": false,
              "stylePreprocessorOptions": {
                "includePaths": ["src", "./node_modules"]
              }
            }
          },
          "defaultConfiguration": "production"
        },

I tried the below options in extra-webpack.config.js

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = (config, options) => {
  config = singleSpaAngularWebpack(config, options);

  config.optimization = {
    ...config.optimization,
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        }
      }
    }
  };

  config.entry = {
    ...config.entry,
    'polyfills': 'src/polyfills.ts',
  };

  config.plugins.push(
    new MomentLocalesPlugin(),
  );
  // Feel free to modify this webpack config however you'd like to
  return config;
};

With this config getting the expected chunks but application is dead when integrating with main application

Not able to make it working. What is wrong with this?