0

I have a problem with a MEAN.js app in that its really slow to load and from the inspect i can see that its loading js in 70 different files.

Couple of questions

Why is there so many js files seperate? Can they not be merged into one and served quicker like YSlow advises?

Edit 

 'modules/*/client/*.js',
 'modules/*/client/**/*.js'

Folder Structure

modules/savings/client/controllers/client.controller.js
ChrisM
  • 706
  • 11
  • 30
  • http://stackoverflow.com/questions/31653024/mean-js-slow-charging-time – Dresden Apr 11 '16 at 22:41
  • Thanks but im not sure if its the same thing. he says he builds the files into one file. This maybe where im going wrong. Even if i "Grunt Build" it still has over 70 files that i believe should be 1 or very few. – ChrisM Apr 11 '16 at 22:56

1 Answers1

1

MEAN.js has that particular aspect covered. In fact, if you run your app using just grunt command, the app will start running in development environment, and so the js files (either the ones from 3rd party libraries or even your custom js files) are not concatenated nor minified. This helps you while debugging. However this is clearly not good for an app in production in terms of performance.

If you use the command grunt prod your app will start running in production mode and so your custom js files will be concatenated and mninified. 3rd party library files won't be concatenated but grunt will use the minified version of them.

You can see which assets will be loaded for both development and production modes in config/assets/development.js and config/assets/production.js, respectively.

Also if you want to see what are the differences between both grunt and grunt prod tasks you can check your gruntfile.js.

Note 1: The commands I mentioned about grunt can also be used with gulp, since MEAN.js has both a gruntfile.js and a gulpfile.js defined.

Note 2: If, by the time you use grunt prod and still have so many files being loaded, that means you are using an high number of 3rd party libraries and a possible solution for that case is to concatenate 3rd party library files into a vendor.js file however in doing that you might run into trouble, such as some libraries like AngularJS needing the files to be loaded with a specific order. You will need extra caution if you edit your gruntfile to implement such task.

pgrodrigues
  • 2,083
  • 1
  • 24
  • 28
  • So i just runt grunt build then deploy to Heroku? – ChrisM Apr 12 '16 at 18:11
  • Is this the same as adding the config NODE_ENV production to Heroku? – ChrisM Apr 12 '16 at 18:22
  • URL is here if it helps in any way http://saveme.ie/ Seems to lod 71 js files now in production mode instead of 69 – ChrisM Apr 12 '16 at 18:29
  • From what I see, you have 3rd party js files minified however your custom js files like angular controllers, services, etc are not being concatenated into one single file called `application.min.js`. Did you change the directories where your files are located? Check your `config/assets/default.js` and see if your files are listed according to those patterns. – pgrodrigues Apr 13 '16 at 08:40
  • I.e.: `js: ['modules/core/client/app/config.js', 'modules/core/client/app/init.js', 'modules/*/client/*.js', 'modules/*/client/**/*.js']` – pgrodrigues Apr 13 '16 at 08:41
  • I think thats ok. ive editied my post to show folder structure. – ChrisM Apr 13 '16 at 13:50