How to reduce *.js and style.css file too large size on deploy angular project? #3425

1 Answer(s)

• 

  0

  muhammedaltug created 2 years ago

  Hello,

  If you added 3rd party style files directly to the angular.json file it will increase the main style bundle file size. You can separate different bundles by configuring these style files.

  Example

  // angular.json
  {
    //other props
    "projects": {
      "YourApp": {
        //other props
        "architect": {
          "build": {
            //other props
            "options": {
              //other props
              "styles": [
                 "node_modules/lib/style.css", // Replace this line with next line
                {
                  "input": "node_modules/lib/style.css",
                  "inject": true,
                  "bundleName": "lib-style"
                }
              ]          
            }
          }
        }
      }
    }
  }
  

  You can use webpack-bundle-analyzer to investigate which libs are included in the main js bundle. By the way, if the components are in the AppModule's declarations array and If the modules are imported directly to AppModule, the main js bundle size will increase. You can consider using the SCAM (Single Component Angular Module) pattern.

  Note: You can use gzip encoding to decrease the size of bundles.

  Save Cancel