AngularJS: does the directory structure (e.g. modular programming) influence loading time?

Question

Can modular programming contribute to lower loading time and how?

I read about ways to Modularize AngularJS applications. In general the reason for doing so is to have a good structure when creating large apps, such that one does not have to scroll to much between files and a separation is made between re-usable and standalone modules.

While this definitely makes sense from a practical point of view, I can't barely find arguments that support loading time?

Will referencing the .js files in the seperate .html files instead of all in index.html reduce loading time?

I was thinking the following; if you have a directory structure as below (Directory Structure Example). The loading time then will decrease if you the inlcude the .js references in the individual .html files instead of all in index.html. For instance, in sidebarView.html you would add:

<script src='sidebarDirective.js'></script>

Directory Structure Example

app/
----- shared/   // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/      // Images and icons for your app
----- css/      // All styles and style related files (SCSS or LESS files)
----- js/       // JavaScript files written for your app that are not for angular
----- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html

score 4 · Accepted Answer · answered Dec 19 '14 at 09:37

When you are building a single page app with Angularjs, the best practice is to concatenate and minify all of your javascript into a single file and precompile all of your html views in a single file. You can then include these directly into your index.html file. This means that a client can make just two network requests to get all of the code necessary for your app to run and won't ever need to wait to download stuff when switching views.

Personally, I use gulp to build my files, but there are lots of different build systems. Here's a sample from my gulpfile that handles the script building:

gulp.task('scripts', function() {
  return gulp.src(scripts)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

gulp.task('customscripts', function() {
  return gulp.src(customscripts)
    .pipe(concat('app-custom.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

gulp.task('views', function() {
  return gulp.src(views)
    .pipe(minifyhtml({empty:true, spare: true, quotes: true, conditionals: true}))
    .pipe(rename(function(path) {
      path.dirname = '';
    }))    
    .pipe(html2js({moduleName: 'app', prefix: 'views/'}))
    .pipe(concat('app-views.js'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(refresh(lrserver));
});

And then in the index.html file:

<script src="/scripts/app-custom.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/app-views.js"></script>

As you can see, the directory structure doesn't matter at all at the end of the day. Personally I switched to using the modular approach and found that for larger projects it is a ton easier to keep organized and componentized.

AngularJS: does the directory structure (e.g. modular programming) influence loading time?

1 Answers1