title: Extremely slow compilation of webpack
body: <p>Our application is based on Angular 4.0. We're trying very hard to reduce the compilation time using webpack 3.8.1.</p>
  
  <p>Currently it takes around 23 to 25 minutes to compile for every change.</p>
  
  <p>Our application has 514 modules and 313 chunks. Some of the modules are lazy loaded. We are using system.import from webpack to dynamically import these modules.</p>
  
  <p>We want to reduce the time taken by advanced module optimization.</p>
  
  <p>We tried almost all the solutions that are related to this issue but no luck.</p>
  
  <p>Below are the build stats:</p>
  
  <pre><code>59944ms [0] building modules
  137455ms [0] sealing
  2ms [0] optimizing
  1ms [0] basic module optimization
  91ms [0] module optimization
  1379558ms [0] advanced module optimization
  1ms [0] basic chunk optimization
  0ms [0] chunk optimization
  1ms [0] advanced chunk optimization
  1ms [0] module and chunk tree optimization
  1ms [0] chunk modules optimization
  0ms [0] advanced chunk modules optimization
  56ms [0] module reviving
  14ms [0] module order optimization
  33ms [0] module id optimization
  35ms [0] chunk reviving
  63ms [0] chunk order optimization
  150ms [0] chunk id optimization
  385ms [0] hashing
  4ms [0] module assets processing
  1356ms [0] chunk assets processing
  24ms [0] additional chunk assets processing
  1ms [0] recording
  2ms [0] additional asset processing
  2ms [0] chunk asset optimization
  11288ms [0] asset optimization
  630ms [0] emitting
  [0] Hash: e37b2ca0d0e832e77295
  Version: webpack 3.8.1
  Child
      Hash: e37b2ca0d0e832e77295
      Time: 1591168ms
  </code></pre>
  
  <p>Here is my package.json:</p>
  
  <pre><code>{
    "name": "shipcom",
    "version": "1.0.0",
    "description": "",
    "main": "main.ts",
    "scripts": {
      "build:libs": "webpack --config stdpkgs.webpack.config.js",
      "start": "webpack --config webpack.config.js --progress --profile --bail",
      "build": "ngc -p tsconfig-aot.json"
    },
    "keywords": [
      "Shipcom"
    ],
    "author": "MS",
    "license": "ISC",
    "dependencies": {
      "@angular/animations": "^4.2.3",
      "@angular/common": "^4.4.3",
      "@angular/compiler": "^4.4.3",
      "@angular/compiler-cli": "^4.4.3",
      "@angular/core": "^4.4.3",
      "@angular/forms": "^4.2.3",
      "@angular/http": "^4.2.3",
      "@angular/platform-browser": "^4.2.3",
      "@angular/platform-browser-dynamic": "^4.2.3",
      "@angular/router": "^4.2.3",
      "@progress/kendo-angular-charts": "^1.2.0",
      "@progress/kendo-angular-dateinputs": "^1.0.0",
      "@progress/kendo-angular-dropdowns": "^0.38.3",
      "@progress/kendo-angular-excel-export": "^1.0.0",
      "@progress/kendo-angular-grid": "^1.2.0",
      "@progress/kendo-angular-inputs": "^1.0.5",
      "@progress/kendo-angular-intl": "^1.0.1",
      "@progress/kendo-angular-l10n": "^1.0.1",
      "@progress/kendo-angular-layout": "^0.21.2",
      "@progress/kendo-angular-popup": "^1.1.0",
      "@progress/kendo-angular-resize-sensor": "^1.0.0",
      "@progress/kendo-angular-upload": "^1.1.1",
      "@progress/kendo-charts": "^1.2.0",
      "@progress/kendo-data-query": "^1.0.3",
      "@progress/kendo-drawing": "^1.1.0",
      "@progress/kendo-popup-common": "^1.0.0",
      "@telerik/kendo-dropdowns-common": "^1.0.0",
      "babel-polyfill": "^6.23.0",
      "bootstrap": "3.3.7",
      "class-transformer": "0.1.6",
      "codemirror": "^5.26.0",
      "core-js": "2.4.1",
      "hammerjs": "^2.0.8",
      "imports-loader": "^0.7.1",
      "keycode-js": "0.0.4",
      "less": "^2.3.1",
      "less-loader": "^4.0.3",
      "lodash": "^4.17.4",
      "ng-dynamic": "^3.0.2",
      "ng2-completer": "^1.5.2",
      "ng2-dnd": "^4.0.2",
      "ng2-file-upload": "^1.2.1",
      "ngx-bootstrap": "^1.8.1",
      "reflect-metadata": "^0.1.8",
      "rxjs": "^5.4.1",
      "webpack": "^3.8.1",
      "zone.js": "^0.8.12"
    },
    "devDependencies": {
      "@angular/cli": "^1.4.2",
      "@types/core-js": "0.9.34",
      "@types/jasmine": "^2.6.0",
      "@types/lodash": "^4.14.50",
      "@types/node": "6.0.46",
      "angular-router-loader": "^0.6.0",
      "angular2-template-loader": "0.6.0",
      "awesome-typescript-loader": "^3.0.3",
      "babel-plugin-dynamic-import-webpack": "^1.0.1",
      "bootstrap-loader": "^2.1.0",
      "bootstrap-sass": "^3.3.7",
      "bootstrap-webpack": "0.0.5",
      "css-loader": "^0.28.7",
      "file-loader": "0.9.0",
      "fork-ts-checker-webpack-plugin": "^0.2.8",
      "happypack": "^4.0.0",
      "html-loader": "0.4.4",
      "html-webpack-plugin": "2.24.1",
      "image-webpack-loader": "^3.3.1",
      "jasmine": "^2.8.0",
      "jasmine-core": "^2.8.0",
      "jasmine-spec-reporter": "^4.2.1",
      "jquery": "^3.1.1",
      "ngx-color-picker": "^4.3.0",
      "node-sass": "^3.11.2",
      "parallel-webpack": "^2.2.0",
      "protractor": "^5.1.2",
      "protractor-beautiful-reporter": "^0.5.0",
      "protractor-jasmine2-screenshot-reporter": "^0.4.1",
      "raw-loader": "0.5.1",
      "resolve-url-loader": "^1.6.0",
      "rimraf": "2.5.4",
      "rollup": "^0.50.0",
      "rollup-plugin-commonjs": "^8.2.4",
      "rollup-plugin-node-resolve": "^3.0.0",
      "rollup-plugin-uglify": "^2.0.1",
      "sass-loader": "^4.0.2",
      "style-loader": "^0.13.1",
      "ts-loader": "^3.1.0",
      "ts-node": "^3.3.0",
      "typescript": "^2.4.0",
      "url-loader": "^0.5.9",
      "webpack-bundle-analyzer": "^2.9.0",
      "webpack-dev-server": "^2.7.1",
      "webpack-merge": "^4.1.0"
    }
  }
  </code></pre>
  
  <p>Here is tsconfig.json:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false,
      "suppressImplicitAnyIndexErrors": true,
      "skipLibCheck": true,
      "lib": [ "es2015", "dom" ] 
    },
    "files": [
      "app/main.ts",
      "app/index.ts"
    ],
    "exclude": [
      "node_modules"        
    ],
    "awesomeTypescriptLoaderOptions": {
      "skipDeclarationFilesCheck ": true,    
      "transpileOnly": true
    },
    "compileOnSave": false,
    "buildOnSave": false
  }
  </code></pre>
  
  <p>Below is my webpack.config file:</p>
  
  <pre><code>&gt; /// &lt;binding AfterBuild='Run - Development' Clean='Run - Development'
  &gt; /&gt; var webPack = require('webpack'); var htmlWebPack =
  &gt; require('html-webpack-plugin'); var path = require('path'); var
  &gt; BundleAnalyzerPlugin =
  &gt; require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  &gt; 
  &gt; var config = {
  &gt;     //Updated entrypoints to use files with ngfactory bootstrap implementation for AOT
  &gt;     entry: {
  &gt;         'app': './app/main-aot.ts',
  &gt;         'appl': './app/appMain-aot.ts',
  &gt;         'polyfills':'./deps/polyfills.ts'
  &gt;     },
  &gt; 
  &gt;     resolve: {
  &gt;         extensions: ['.ts', '.js', 'css'],
  &gt;         symlinks: false,
  &gt;         cacheWithContext: false,
  &gt;         modules: [
  &gt;             path.resolve(__dirname, 'node_modules'),
  &gt;             path.resolve(__dirname, 'source')]
  &gt;     },
  &gt; 
  &gt;     devtool: 'eval',
  &gt; 
  &gt;     module: {
  &gt;         rules: [
  &gt;             {
  &gt;                 test: /\.ts$/,
  &gt;                 exclude: '/node_modules/',
  &gt;                 //Updated rules to use angular-router-loader with aot path configuration 
  &gt;                 use: [
  &gt;                 'awesome-typescript-loader',
  &gt;                 'angular-router-loader?aot=true&amp;genDir=aot/',
  &gt;                 'angular2-template-loader'
  &gt;                 ]
  &gt;             },
  &gt;             {
  &gt;                 test: /\.html$/,
  &gt;                 loader: 'raw-loader'
  &gt;             },
  &gt;             {
  &gt;                 test: /\.css$/,
  &gt;                 use: ["style-loader", "css-loader"]
  &gt;             },
  &gt;             {
  &gt;                 test: /\.scss$/,
  &gt;                 use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
  &gt;             },
  &gt;             {
  &gt;                 test: /\.(woff2?|ttf|eot|svg)$/,
  &gt;                 loader: 'url-loader?limit=10000'
  &gt;             },
  &gt;             {
  &gt;                 test: /bootstrap\/dist\/js\/umd\//,
  &gt;                 loader: 'imports-loader?jQuery=jquery'
  &gt;             },
  &gt;             {
  &gt;                 test: /\.(jpe?g|png|gif|svg)$/i,
  &gt;                 use: [
  &gt;                         { loader: "file-loader", options: { hash: "sha512", digest: "hex", name: "[hash].[ext]" } },
  &gt;                         { loader: "image-webpack-loader", options: { bypassonDebug: true, optimizationLevel: 7, interlaced: false } }
  &gt;                 ]
  &gt;             }
  &gt;         ]
  &gt;     },
  &gt; 
  &gt;     plugins: [
  &gt;         new BundleAnalyzerPlugin(),
  &gt; 
  &gt;         new webPack.ContextReplacementPlugin(
  &gt;             /angular(\\|\/)core(\\|\/)@angular/,
  &gt;             path.resolve(__dirname, './')
  &gt;         ),
  &gt; 
  &gt;         new webPack.ProvidePlugin({
  &gt;             jQuery: 'jquery',
  &gt;             $: 'jquery',
  &gt;             jquery: 'jquery'
  &gt;         }),
  &gt; 
  &gt;         new webPack.DllReferencePlugin({
  &gt;             context: path.resolve(__dirname),
  &gt;             manifest: require(path.resolve(__dirname, 'dist/stdpkgs-manifest.json'))
  &gt;         }),
  &gt;           ],
  &gt;     output: {
  &gt;         path: path.resolve(__dirname, 'dist'),
  &gt;         filename: '[name].js',
  &gt;         //library: '[name]_lib',
  &gt;         chunkFilename: 'chunk/[name].js',
  &gt;         publicPath: 'dist/',
  &gt;     } }; module.exports = config;
  </code></pre>