chunk scripts.js is more than 5mb after building


Topic: chunk scripts.js is more than 5mb after building

nothingeni asked 5 years ago

Hello,

I've deployed my web application on server with Netlify. The app is working but the loading time is way too long. I've passed last days optimizing image weight, cdn, reducing bundle size, ...

But there still is a problem I can't resolve at the moment. After running ng build --prod the scripts.js generated is way too big. Here is a console log after building the application on server :

9:15:51 AM: chunk {0} runtime.a8ef3a8272419c2e2c66.js (runtime) 1.45 kB [entry] [rendered]
9:15:51 AM: chunk {1} main.ecc7163ffeeee4966b95.js (main) 736 kB [initial] [rendered]
9:15:51 AM: chunk {2} polyfills.bbc3907f151f2b4a9cd9.js (polyfills) 48.7 kB [initial] [rendered]
9:15:51 AM: chunk {3} polyfills-es5.7e8c873cb59cc97917d1.js (polyfills-es5) 128 kB [initial] [rendered]
9:15:51 AM: chunk {4} styles.ddf49b4c1cf8ca1aebcc.css (styles) 550 kB [initial] [rendered]
9:15:51 AM: chunk {scripts} scripts.011cc49f664a77b7ee71.js (scripts) 5.58 MB [entry] [rendered]

As you can see, the last chunk is way too big.

(scripts) 5.58 MB [entry] [rendered]

Netlify handles gzip so the final size of the scripts is 1.8MB as shown here (developper tools -> network)

enter image description here

More than 5s loading time for that js file.

Here's my angular.json file where i've imported the dependecies MDB needs

"styles":   [
              "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-pro/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-pro/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-pro/scss/brands.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "src/styles.scss"
            ],
"scripts":  [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/easy-pie-chart/dist/easypiechart.js",
              "node_modules/screenfull/dist/screenfull.js",
              "node_modules/hammerjs/hammer.min.js",
              "node_modules/@fortawesome/fontawesome-pro/js/all.js"
            ]

Is there a way to reduce that scripts.js size and improve the loading time of the page ?


Arkadiusz Idzikowski staff commented 5 years ago

Can you check the scripts.js size without this import? Maybe there is a minified version for this script:

node_modules/@fortawesome/fontawesome-pro/js/all.js


nothingeni answered 5 years ago

I found a solution thank to @Arkadiusz Idzikowski remark.

I was actually importing the whole /fontawesome-pro/js/all.js the wrong way. FontAwesome now provides module to includes only scripts for used icons instead of loading the whole lib.

I replaced whole <img class="fa..."></img> with <fa-icon> as explained here. After rebuild scipts.js is now only 7kB...

Thanks for help!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: Desktop
  • Browser: Chrome latest
  • OS: Windows 10 latest
  • Provided sample code: No
  • Provided link: No
Tags