title: Reduce the size of main.js Angular 11
body: <p>I encouter a problem with my app that has a main.js with a size of 8.34 MB by defalt (ng build).
  I tested a lot ! of things to reduce it but i just don't arrive to..</p>
  <p>I really need that the size be less than 2 mb.. ( and i think it's huge too..)
  Thanks for help !
  <a href="https://i.stack.imgur.com/Ja1c7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ja1c7.png" alt="enter image description here" /></a>
  What i tried (size of main.js) :</p>
  <pre><code>ng build = 8.34MB
  ng build --prod = 7.71 MB
  ng build --prod --aot --build-optimizer = 7.71 MB
  ng build --prod --aot --build-optimizer &amp;&amp; gzipper compress ./dist = ...
  </code></pre>
  <p>package.json</p>
  <pre><code>{
      &quot;name&quot;: &quot;app&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;scripts&quot;: {
          &quot;ng&quot;: &quot;ng&quot;,
          &quot;start&quot;: &quot;ng serve --proxy-config proxy.conf.json --hmr&quot;,
          &quot;build&quot;: &quot;ng build --prod --aot --build-optimizer &amp;&amp; gzipper compress ./dist&quot;,
          &quot;test&quot;: &quot;ng test&quot;,
          &quot;lint&quot;: &quot;ng lint&quot;,
          &quot;e2e&quot;: &quot;ng e2e&quot;
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
          &quot;@angular/animations&quot;: &quot;11.1.2&quot;,
          &quot;@angular/cdk&quot;: &quot;^11.1.2&quot;,
          &quot;@angular/common&quot;: &quot;11.1.2&quot;,
          &quot;@angular/compiler&quot;: &quot;11.1.2&quot;,
          &quot;@angular/core&quot;: &quot;11.1.2&quot;,
          &quot;@angular/flex-layout&quot;: &quot;^11.0.0-beta.33&quot;,
          &quot;@angular/forms&quot;: &quot;11.1.2&quot;,
          &quot;@angular/material&quot;: &quot;^11.1.2&quot;,
          &quot;@angular/material-moment-adapter&quot;: &quot;^11.1.2&quot;,
          &quot;@angular/platform-browser&quot;: &quot;11.1.2&quot;,
          &quot;@angular/platform-browser-dynamic&quot;: &quot;11.1.2&quot;,
          &quot;@angular/router&quot;: &quot;11.1.2&quot;,
          &quot;@ngx-translate/core&quot;: &quot;^13.0.0&quot;,
          &quot;@ngx-translate/http-loader&quot;: &quot;^6.0.0&quot;,
          &quot;@swimlane/ngx-charts&quot;: &quot;^17.0.0&quot;,
          &quot;@swimlane/ngx-datatable&quot;: &quot;^19.0.0&quot;,
          &quot;@types/d3-shape&quot;: &quot;^2.0.0&quot;,
          &quot;ajv&quot;: &quot;^7.0.4&quot;,
          &quot;angular-calendar&quot;: &quot;^0.28.22&quot;,
          &quot;angular-feather&quot;: &quot;^6.1.0&quot;,
          &quot;angular-ng-autocomplete&quot;: &quot;^2.0.5&quot;,
          &quot;apexcharts&quot;: &quot;^3.24.0&quot;,
          &quot;c3&quot;: &quot;^0.7.20&quot;,
          &quot;chart.js&quot;: &quot;^2.9.4&quot;,
          &quot;chartist&quot;: &quot;^0.11.4&quot;,
          &quot;core-js&quot;: &quot;^3.8.3&quot;,
          &quot;d3&quot;: &quot;^6.5.0&quot;,
          &quot;date-fns&quot;: &quot;^2.17.0&quot;,
          &quot;extend&quot;: &quot;^3.0.2&quot;,
          &quot;gulp-cli&quot;: &quot;^2.3.0&quot;,
          &quot;gzipper&quot;: &quot;^4.4.0&quot;,
          &quot;handlebars&quot;: &quot;^4.7.6&quot;,
          &quot;lodash&quot;: &quot;^4.17.20&quot;,
          &quot;mat-table-exporter&quot;: &quot;^9.1.0&quot;,
          &quot;moment&quot;: &quot;^2.29.1&quot;,
          &quot;ng-apexcharts&quot;: &quot;^1.5.7&quot;,
          &quot;ng-chartist&quot;: &quot;4.1.0&quot;,
          &quot;ng-multiselect-dropdown&quot;: &quot;^0.2.14&quot;,
          &quot;ng2-charts&quot;: &quot;^2.4.2&quot;,
          &quot;ng2-completer&quot;: &quot;^9.0.1&quot;,
          &quot;ng2-dragula&quot;: &quot;^2.1.1&quot;,
          &quot;ng2-file-upload&quot;: &quot;^1.4.0&quot;,
          &quot;ng2-search-filter&quot;: &quot;^0.5.1&quot;,
          &quot;ngx-clipboard&quot;: &quot;^14.0.1&quot;,
          &quot;ngx-cookie-service&quot;: &quot;^11.0.2&quot;,
          &quot;ngx-custom-validators&quot;: &quot;11.0.1&quot;,
          &quot;ngx-pagination&quot;: &quot;^5.0.0&quot;,
          &quot;ngx-perfect-scrollbar&quot;: &quot;^10.1.0&quot;,
          &quot;ngx-quill&quot;: &quot;^13.1.0&quot;,
          &quot;quill&quot;: &quot;^1.3.7&quot;,
          &quot;rxjs&quot;: &quot;~6.6.3&quot;,
          &quot;rxjs-compat&quot;: &quot;^6.6.3&quot;,
          &quot;sass&quot;: &quot;^1.32.6&quot;,
          &quot;sweetalert2&quot;: &quot;^10.14.0&quot;,
          &quot;tslib&quot;: &quot;^2.1.0&quot;,
          &quot;zone.js&quot;: &quot;~0.11.3&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@angular-devkit/build-angular&quot;: &quot;0.1101.4&quot;,
          &quot;@angular/cli&quot;: &quot;11.1.4&quot;,
          &quot;@angular/compiler-cli&quot;: &quot;11.1.2&quot;,
          &quot;@types/chartist&quot;: &quot;0.11.0&quot;,
          &quot;@types/jasmine&quot;: &quot;~3.6.3&quot;,
          &quot;@types/jasminewd2&quot;: &quot;~2.0.8&quot;,
          &quot;@types/node&quot;: &quot;^14.14.25&quot;,
          &quot;codelyzer&quot;: &quot;^6.0.1&quot;,
          &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
          &quot;jasmine-spec-reporter&quot;: &quot;~6.0.0&quot;,
          &quot;karma&quot;: &quot;~6.1.0&quot;,
          &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
          &quot;karma-coverage-istanbul-reporter&quot;: &quot;~3.0.3&quot;,
          &quot;karma-jasmine&quot;: &quot;~4.0.1&quot;,
          &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.4&quot;,
          &quot;protractor&quot;: &quot;~7.0.0&quot;,
          &quot;ts-node&quot;: &quot;~9.1.1&quot;,
          &quot;tslint&quot;: &quot;~6.1.0&quot;,
          &quot;typescript&quot;: &quot;^4.1.3&quot;
      }
  }
  </code></pre>