0

After deployed ng build --prod dist folder Dist folder

I'm using angular 6 and lazy loading module with "CustomPreloadingStrategy" and enabled GZIP compression. with reference link need to decrease bundle js files.

ng serve --prod (initial load page finish less than 3 seconds)

chunk {1} main.e15dbe5b36838602da7f.js (main) 1.18 MB [initial] [rendered]
chunk {5} vendor.f69386968aafba8d79d3.js (vendor) 2.24 MB [initial] [rendered]

ng build --prod (initial load page finish less than 15 seconds) so need to finish initial load page below 3 seconds

I have huge project file more than 50 MB file size so after deployed with ng build --prod it's comes 10 MB.

chunk {1} main.ea8033fd76e2ff3ea29d.js (main) 3.28 MB [initial] [rendered]//after ng build --prod main.js file more than 3.28 MB so need to decrease size of bundle size.
chunk {4} 4.f621cfb9a654b1c82a9f.js () 1.53 MB  [rendered]

tsconfig.json

   {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
    }
  }

angular.json //here I have production environment path

 "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
     }
sameer
  • 447
  • 3
  • 12
  • 20

0 Answers0