Topic: chunk scripts.js is more than 5mb after building
                  
                  nothingeni
                  free
                  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)

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 ?
                      
                      nothingeni
                      free
                        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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 8.8.2
 - Device: Desktop
 - Browser: Chrome latest
 - OS: Windows 10 latest
 - Provided sample code: Yes
 - Provided link: No
 
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