title: Angular 2 production bundle file is too large
body: <p>i use webpack bundle my angular 2 project, when i bundle the main file. the file is too large, the file size is about 8M. then whenever i refresh my page, there will be a long time for the browser to load and execute the javascript files. 
  I think there may be too many files that i don't needs,but how can i find it and kick it out of my bundle files? 
  thank u for give me some advice or some help.</p>
  
  <p>here is my main part of webpack config:
  webpack.common.js:</p>
  
  <pre><code>const webpack = require('webpack');
  const helpers = require('./helpers');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
  
  module.exports = {
      baseUrl: './',
      entry: {
          // 'polyfills': './src/polyfills.ts',
          // 'vendor': './src/vendor.ts',
          'main': './src/main.ts'
      },
      resolve: {
          extensions: ['', '.ts', '.js', '.json'],
          root: helpers.root('src'),
          modulesDirectories: ['node_modules'],
      },
      module: {
          loaders: [
              {
                  test: /\.ts$/,
                  loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                  exclude: [/\.(spec|e2e)\.ts$/]
              },
              {
                  test: /\.json$/,
                  loader: 'json-loader'
              },
              {
                  test: /\.css$/,
                  loaders: ['raw-loader']
              },
              {
                  test: /\.html$/,
                  loader: 'raw-loader',
                  exclude: [helpers.root('src/index.html')]
              },
              {
                  test: /\.scss$/,
                  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
              },
              {
                  test: /\.(jpg|png|gif)$/,
                  loader: 'file'
              },
              {
                  test: /.(png|woff(2)?|eot|ttf|svg)$/,
                  loader: 'url-loader'
              }
          ]
  
      },
      plugins: [
          new ForkCheckerPlugin(),
          // new CopyWebpackPlugin([
          //     {from: 'src/assets', to: 'assets'},
          //     {from: 'src/app/i18n', to: 'app/i18n'},
          //     {from: 'src/loading.css', to: 'loading.css'},
          //     {from: 'src/fonts', to: 'fonts'},
          //     {from: 'src/favicon.ico', to: ''},
          //     {from: 'src/img', to: 'img'}]),
          new HtmlWebpackPlugin({
              template: 'src/index.html',
              chunksSortMode: 'dependency'
          })
      ],
  
      node: {
          global: 'window',
          crypto: 'empty',
          process: true,
          module: false,
          clearImmediate: false,
          setImmediate: false
      }
  
  };
  </code></pre>
  
  <p>webpack.prod.js</p>
  
  <pre><code>const helpers = require('./helpers');
  const webpackMerge = require('webpack-merge'); // used to merge webpack configs
  const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
  /**
   * Webpack Plugins
   */
  const webpack = require('webpack');
  const ProvidePlugin = require('webpack/lib/ProvidePlugin');
  const DefinePlugin = require('webpack/lib/DefinePlugin');
  const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
  const IgnorePlugin = require('webpack/lib/IgnorePlugin');
  const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
  const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
  const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
  const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
  const HOST = process.env.HOST || 'localhost';
  
  module.exports = webpackMerge(commonConfig, {
      devtool: 'source-map',
  
      output: {
          path: helpers.root('dist'),
          filename: '[name].bundle.js',
          chunkFilename: '[id].chunk.js'
      },
  
      plugins: [
          // new webpack.NoErrorsPlugin(), // 如果出现任何错误 就终止构建
          // new DedupePlugin(), // 检测完全相同(以及几乎完全相同)的文件 并把它们从输出中移除
          // new webpack.optimize.CommonsChunkPlugin({
          //     name: ['polyfills', 'vendor', 'main'].reverse()
          // }),
          new UglifyJsPlugin({
              beautify: false,
              mangle: { screw_ie8 : true, keep_fnames: true },
              compress: { screw_ie8: true, warnings: false },
              comments: false
          }),
          // new ExtractTextPlugin('[name].[hash].css'), // 把内嵌的 css 抽取成玩不文件 并为其文件名添加 hash 后缀 使得浏览端缓存失效
          new DefinePlugin({ // 定义环境变量
              'process.env': {
                  ENV: JSON.stringify(ENV)
              }
          }),
      ],
  
      htmlLoader: {
          minimize: true,
          removeAttributeQuotes: false,
          caseSensitive: true,
          customAttrSurround: [
              [/#/, /(?:)/],
              [/\*/, /(?:)/],
              [/\[?\(?/, /(?:)/]
          ],
          customAttrAssign: [/\)?\]?=/]
      },
  
      tslint: {
          emitErrors: true,
          failOnHint: true,
          resourcePath: 'src'
      },
  
      node: {
          global: 'window',
          crypto: 'empty',
          process: false,
          module: false,
          clearImmediate: false,
          setImmediate: false
      }
  
  });
  </code></pre>
  
  <p>i dropped my vendor.ts file
  here is my polyfills.ts</p>
  
  <pre><code>// This file includes polyfills needed by Angular 2 and is loaded before
  // the app. You can add your own extra polyfills to this file.
  // Added parts of es6 which are necessary for your project or your browser support requirements.
  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/set';
  import 'core-js/es6/reflect';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/weak-set';
  
  import 'core-js/es7/reflect';
  import 'zone.js/dist/zone';
  </code></pre>