title: Angular How to decrease size of bundle vendor and main js files
body: <p>I installed <strong>Install source-map-explorer globally need to decrease bundle files to optimize anlyze</strong> </p>
  
  <ul>
  <li>To Increase speed of Initial load page I have done</li>
  </ul>
  
  <blockquote>
    <ol>
    <li>Lazy loading module with preloading.</li>
    <li>Gulp compress configured for Images and JS files.</li>
    </ol>
  </blockquote>
  
  <p><strong>so need to decrease bundle JS files , I didn't see webpack.conf <a href="https://stackoverflow.com/questions/44508969/webpack-source-maps-pointing-to-minified-bundle">reference link</a> file in my angular 6 project .</strong></p>
  
  <blockquote>
    <p>$ npm install -g source-map-explorer</p>
  </blockquote>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>  {
    "name": "cfch",
    "version": "0.0.0",
    "main": "gulpfile.js",
    "scripts": {
      "ng": "ng",
      "start": "gulp &amp;&amp; ng serve  --proxy-config proxy.conf.json",
      "build": "ng build --prod --source-map gulp",
      "prebuild": "gulp"
    },
    "dependencies": {
      "@angular/animations": "^6.1.0",
      "@angular/cdk": "^6.1.0",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "gulp-htmlmin": "^5.0.1",
      "gulp-imagemin": "^5.0.3",
      "gulp-minify-css": "^1.2.4",
      "gulp-uglify": "^3.0.1",
      "ts-xlsx": "0.0.11",
      "webpack-sources": "^1.3.0",
    },
  "devDependencies": {
      "source-map-explorer": "^1.7.0",
     }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/f509o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f509o.png" alt="Result"></a></p>
  
  <pre><code>Note:vendor.js and main.js 2.4MB and 222KB
  </code></pre>