Lazy Decorator
When working on a big scaled application, sometimes you want to load and asynchronously instantiate part of it. If you worked on a big client-side application with a bundler like Webpack, you probably know how code-splitting works.
If you read about Injex's Webpack Runtime, you noticed that we use the require.context()
to load the files inside the project. The problem with this approach is that we're bundling all the code together.
With the @lazy()
decorator you create a class that implements the ILazyModule
interface. The import
method should load and return a Constructor inside a Promise, then the constructor is called with args you pass in. You can use the import
method for lazy-loading the code.
Usage
To use the @lazy()
decorator, put it above an exported class that implements the ILazyModule
interface. Lines 9 and 11 will create a chunk using Webpack's code-splitting feature.
Notice how the lazy-loaded class (HomePage) not defined by the @define()
decorator since it's get registered when loaded by the @lazy()
module, but it's not preventing you from using the @inject()
, @injectAlias()
, @init()
decorators.