Ends in:
4 DAYS
8 HRS
57 MIN
35 SEC
Ends in:
4 D
8 H
57 M
35 S
Open Closed

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


User avatar
0
vipulbuoyancy created
  • ABP Framework version: v5.2.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

Hello

I deploy angular project on server, some file size is too large.

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

Thanks


1 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35