title: the angular 5 build produces main.bundle in MB which creates performance issues in the production
body: <p>I am using angular 5 for my project, with webpack 3.10. When i try to build the application, the build has main bundle file of approximately 2.8 MB, which creates performance issues in the production. I am using "npm run build:prod --aot --build-optimizer" to build application. I went through other stack overflow articles to figure the solution, and realised that the build i am having does not contain vendor file. i tried using different ways suggested by various articles but all in vain. please help in this. for reference i am uploading my  webpack.config.js, webpack.common.js, webpack.prod.js, main.browser.ts, polyfills.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>webpack.config.js
  
  switch (process.env.NODE_ENV) {
    case 'prod':
    case 'production':
      module.exports = require('./config/webpack.prod')({env: 'production'});
      break;
    case 'test':
    case 'testing':
      module.exports = require('./config/webpack.test')({env: 'test'});
      break;
    case 'dev':
    case 'development':
    default:
      module.exports = require('./config/webpack.dev')({env: 'development'});
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>webpack.common.js
  
  const helpers = require('./helpers');
  
  /**
   * Webpack Plugins
   *
   * problem with copy-webpack-plugin
   */
  const DefinePlugin = require('webpack/lib/DefinePlugin');
  const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const HtmlElementsPlugin = require('./html-elements-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
  const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
  const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
  const ngcWebpack = require('ngc-webpack');
  
  const buildUtils = require('./build-utils');
  
  
  /**
   * Webpack configuration
   *
   * See: http://webpack.github.io/docs/configuration.html#cli
   */
  module.exports = function (options) {
    const isProd = options.env === 'production';
    const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
    const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
    const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
  
    const entry = {
      polyfills: './src/polyfills.browser.ts',
      main:      './src/main.browser.ts'
    };
  
    Object.assign(ngcWebpackConfig.plugin, {
      tsConfigPath: METADATA.tsConfigPath,
      mainPath: entry.main
    });
  
    return {
  
      entry: entry,
  
  
      resolve: {
        mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
  
        extensions: ['.ts', '.js', '.json'],
  
  
        modules: [helpers.root('src'), helpers.root('node_modules')],
  
  
        alias: buildUtils.rxjsAlias(supportES2015)
      },
  
  
      module: {
  
        rules: [
          ...ngcWebpackConfig.loaders,
  
  
          {
            test: /\.css$/,
            use: ['to-string-loader', 'css-loader'],
            exclude: [helpers.root('src', 'styles')]
          },
  
  
          {
            test: /\.scss$/,
            use: ['to-string-loader', 'css-loader', 'sass-loader'],
            exclude: [helpers.root('src', 'styles')]
          },
  
          {
            test: /\.html$/,
            use: 'raw-loader',
            exclude: [helpers.root('src/index.html')]
          },
  
          /**
           * File loader for supporting images, for example, in CSS files.
           */
          {
            test: /\.(jpg|png|gif)$/,
            use: 'file-loader'
          },
  
          /* File loader for supporting fonts, for example, in CSS files.
          */
          {
            test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
            use: 'file-loader'
          }
  
        ],
  
      },
  
      plugins: [
  
        new DefinePlugin({
          'ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'AOT': METADATA.AOT,
          'process.env.ENV': JSON.stringify(METADATA.ENV),
          'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
          'process.env.HMR': METADATA.HMR
        }),
  
  
        new CommonsChunkPlugin({
          name: 'polyfills',
          chunks: ['polyfills']
        }),
  
        new CommonsChunkPlugin({
          minChunks: Infinity,
          name: 'inline'
        }),
        new CommonsChunkPlugin({
          name: 'main',
          async: 'common',
          children: true,
          minChunks: 2
        }),
  
  
  
        new CopyWebpackPlugin([
          { from: helpers.root('src/assets'), to: 'assets' },
          { from: helpers.root('src/assets/img'), to: 'assets/img' },
          { from: helpers.root('src/meta')},
          { from: helpers.root('node_modules/font-awesome'), to: 'font-awesome' },
          { from: helpers.root('node_modules/primeng/resources/primeng.min.css'), to: 'resources' },
          { from: helpers.root('node_modules/primeng/resources/themes/_theme.scss'), to: 'resources/themes' },
          { from: helpers.root('src/assets/css/themes/citi-prime'), to: 'resources/themes/citi-prime' }
        ],
          isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined
        ),
  
        /*
        * Plugin: HtmlWebpackPlugin
        * Description: Simplifies creation of HTML files to serve your webpack bundles.
        * This is especially useful for webpack bundles that include a hash in the filename
        * which changes every compilation.
        *
        * See: https://github.com/ampedandwired/html-webpack-plugin
        */
        new HtmlWebpackPlugin({
          template: 'src/index.html',
          title: METADATA.title,
          chunksSortMode: function (a, b) {
            const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
            return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
          },
          metadata: METADATA,
          inject: 'body',
          xhtml: true,
          minify: isProd ? {
            caseSensitive: true,
            collapseWhitespace: true,
            keepClosingSlash: true
          } : false//,
          //baseUrl: isProd ? '.' : '/'
        }),
  
  
        new ScriptExtHtmlWebpackPlugin({
          sync: /inline|polyfills|vendor/,
          defaultAttribute: 'async',
          preload: [/polyfills|vendor|main/],
          prefetch: [/chunk/]
        }),
  
        new HtmlElementsPlugin({
          publicPath: '/',
          headTags: require('./head-config.common')
        }),
  
  
        new LoaderOptionsPlugin({}),
  
        new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin),
  
  
        new InlineManifestWebpackPlugin(),
      ],
  
  
      node: {
        global: true,
        crypto: 'empty',
        process: true,
        module: false,
        clearImmediate: false,
        setImmediate: false
      }
  
    };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>wepack.prod.js
  
  
  const helpers = require('./helpers');
  const buildUtils = require('./build-utils');
  
  /**
   * Used to merge webpack configs
  */
  const webpackMerge = require('webpack-merge');
  /**
   * The settings that are common to prod and dev
  */
  const commonConfig = require('./webpack.common.js');
  
  /**
   * Webpack Plugins
   */
  const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
  const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
  const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  
  
  function getUglifyOptions (supportES2015) {
    const uglifyCompressOptions = {
      pure_getters: true, /* buildOptimizer */
      // PURE comments work best with 3 passes.
      // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
      passes: 3         /* buildOptimizer */
    };
  
    return {
      ecma: supportES2015 ? 6 : 5,
      warnings: false,    // TODO verbose based on option?
      ie8: false,
      mangle: true,
      compress: uglifyCompressOptions,
      output: {
        ascii_only: true,
        comments: false
      }
    };
  }
  
  module.exports = function (env) {
    const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
    const supportES2015 = buildUtils.supportES2015(buildUtils.DEFAULT_METADATA.tsConfigPath);
    const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
      host: process.env.HOST || 'localhost',
      port: process.env.PORT || 8080,
      ENV: ENV,
      HMR: false
    });
  
  
    METADATA.envFileSuffix = METADATA.E2E ? 'e2e.prod' : 'prod';
  
    return webpackMerge(commonConfig({ env: ENV, metadata: METADATA }), {
  
  
      output: {
  
  
        path: helpers.root('dist'),
  
  
        filename: '[name].[chunkhash].bundle.js',
  
  
        sourceMapFilename: '[file].map',
  
  
        chunkFilename: '[name].[chunkhash].chunk.js'
  
      },
  
      module: {
  
        rules: [
  
  
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader'
            }),
            include: [helpers.root('src', 'styles')]
          },
  
  
          {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader!sass-loader'
            }),
            include: [helpers.root('src', 'styles')]
          },
  
        ]
  
      },
  
  
      plugins: [
  
        new SourceMapDevToolPlugin({
          filename: '[file].map[query]',
          moduleFilenameTemplate: '[resource-path]',
          fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
          sourceRoot: 'webpack:///'
        }),
  
  
  
        new ExtractTextPlugin('[name].[contenthash].css'),
  
        new PurifyPlugin(), /* buildOptimizer */
  
        new HashedModuleIdsPlugin(),
        new ModuleConcatenationPlugin(),
  
  
        new UglifyJsPlugin({
          sourceMap: true,
          uglifyOptions: getUglifyOptions(supportES2015)
        }),
       
      
  
      ],
  
  
      node: {
        global: true,
        crypto: 'empty',
        process: false,
        module: false,
        clearImmediate: false,
        setImmediate: false
      }
  
    });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>s</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>main.browser.js
  
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { environment } from 'environments/environment';
  
  //import '../node_modules/font-awesome/css/font-awesome.min.css';
  //import '../node_modules/primeng/resources/themes/omega/theme.scss';
  //import '../node_modules/primeng/resources/primeng.min.css';
  
  import './styles/styles.scss'
  
  
  import { AppModule } from './app';
  
  
  export function main(): Promise&lt;any&gt; {
    return platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .then(environment.decorateModuleRef)
      .catch((err) =&gt; console.error(err));
  }
  
  
  switch (document.readyState) {
    case 'loading':
      document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
      break;
    case 'interactive':
    case 'complete':
    default:
      main();
  }
  
  function _domReadyHandler() {
   document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
   main();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>polyfills.js
  
   import 'core-js/es6/symbol';
   import 'core-js/es6/object';
   import 'core-js/es6/function';
   import 'core-js/es6/parse-int';
   import 'core-js/es6/parse-float';
   import 'core-js/es6/number';
   import 'core-js/es6/math';
   import 'core-js/es6/string';
   import 'core-js/es6/date';
   import 'core-js/es6/array';
   import 'core-js/es6/regexp';
   import 'core-js/es6/map';
   import 'core-js/es6/weak-map';
   import 'core-js/es6/set';
  
  
   import 'classlist.js';  // Run `npm install --save classlist.js`.
  
  
  import 'core-js/es6/reflect';
  import 'core-js/es7/reflect';
  
  
  
   import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  
  import 'zone.js/dist/zone';
  
  if ('production' === ENV) {
    // Production
  
  } else {
  
    // Development
  }</code></pre>
  </div>
  </div>
  </p>