Discussions

Ask a Question
Back to All

Minification and Bundling

I have an application that has many modules. Each module has components that are lazily loaded using a service like so:
angular.module('myApp', [])
.config()
.service("lazyLoad", lazyLoad)
lazyLoad.$inject = ['$ocLazyLoad'];
function lazyLoad(ocLazyLoad) {
return ocLazyLoad.load([
"path/to/component1",
"path/to/component2",
etc....
])
}

I eventually bundle and minify all of the files relating to this module.
But, this minified version is still telling ocLazyLoad to get files at "path/to/component1" instead of "file/to/component1.min.js".

A couple of solutions?:

  1. check for production or development environment in the service, create a bundle that includes all components but excludes the module file above and instead of loading "path/to/component1", just load one bundle (this one created without the module file above).

  2. create a .min.js file for every component that is lazily loaded. keep the module file above the same except check for prod or dev env and if dev load all the files but with .min.js. If done this way, then it defeats the purpose of having one large minified bundle.

Any other solutions? Thanks.