1

I installed Install source-map-explorer globally need to decrease bundle files to optimize anlyze

  • To Increase speed of Initial load page I have done
  1. Lazy loading module with preloading.
  2. Gulp compress configured for Images and JS files.

so need to decrease bundle JS files , I didn't see webpack.conf reference link file in my angular 6 project .

$ npm install -g source-map-explorer

package.json

  {
  "name": "cfch",
  "version": "0.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "ng": "ng",
    "start": "gulp && 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",
   }

Result

Note:vendor.js and main.js 2.4MB and 222KB
sameer
  • 447
  • 3
  • 12
  • 20
  • please create a [mcve] – Joel Feb 28 '19 at 08:00
  • Im not sure what you are asking. Are you asking how to use source map explorer, or how to decrease your bundle size? – skolldev Feb 28 '19 at 08:08
  • I need to decrease my bundle js files, because need to increase speed of initial load page. – sameer Feb 28 '19 at 08:26
  • As far as I know, source-map-explorer is not used to decrease bundle size; it's only used to analyze and debug JavaScript (or Sass or LESS) code bloat through source maps. – Tushar Walzade Feb 28 '19 at 08:30
  • so far as loading initial page bundle js files much bigger , so need to decrease size of that bundle js files. – sameer Feb 28 '19 at 08:33
  • Possible duplicate of [Angular2 CLI huge vendor bundle: how to improve size for prod?](https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod) – Tushar Walzade Feb 28 '19 at 08:33
  • [This](https://medium.com/grano/optimizing-angular-application-load-performance-6bb796b1a7c1) article would be helpful. – Tushar Walzade Feb 28 '19 at 08:35
  • Did you try "ng build --prod --aot"? – Stefan Großmann Feb 28 '19 at 08:53
  • @StefanGroßmann when i try above got error like that :"NullInjectorError: No provider for n". reference link :https://stackoverflow.com/questions/50739210/angular-5-nullinjectorerror-no-provider-for-n , so need to use either --prod or --aot – sameer Feb 28 '19 at 09:12

0 Answers0