Code splitting/Lazy load with Webpack & ocLazyLoad

Question

I know there are solutions out there to retrieve via javascript using System.import, however I want to use the directive version so we don't have to create a controller for every single template.

What I'm trying to achieve is extracting a list of all files sent as an entry file, with a specific extension, and get their bundled name.

Let's say I have 3 files for simplicity:

module-a.lazy.js
module-b.lazy.js
main.entry.js

Let's say my entry points and output are defined like so:

var config = {
    entry: {
        module-a: "./module-a.lazy.js",
        module-b: "./module-b.lazy.js",
        bundle: "./main.entry.js"
    },
    output: {
        filename: "[name]-[hash:4].js",
        path : '/build'
    }
}

Obviously I'm going to end up with 3 files in my build folder, each with a custom dynamic hash in it's filename which i cannot type into the ocLazyLoad directive.

In the main.entry.js file, I have a constant setup, which I'd like to replace with the output names of the lazy files.

angular.module('demo', [])
    .constant('lazies', '%lazyfilenamehere%');

Expected output would be something like this:

angular.module('demo', [])
    .constant('lazies', ['/build/module-a.lazy-af34.js','/build/module-b.lazy-fdg3.js']);

Once I can obtain the output path names and store them in the main bundle, I can easily decorate the original ocLazyLoad directive to first search this array by a partial string, when matched it can return the whole filename and request it as normal.

score 0 · Answer 1 · answered Mar 12 '18 at 20:36

You don't even need to specify entrypoints, they will be created automagically once you start using dynamic imports. Use something like that:

angular.module('demo', [])
        .constant('lazies', {
    'module-a' : () => import('module-a'), 
    'module-b' : () => import('module-b')
});

Than base your directive on ocLazyLoad and get your lazy module just in time with exact match.

UPD: I started to think probably it's possible to generate a set of directives based on module names. Than you can simply use them anywhere you want!

Code splitting/Lazy load with Webpack & ocLazyLoad

1 Answers1