Code Splitting

The Nijor compiler automatically compiles and packages all *.nijor page files into multiple Javascript files. But compiles the *.nijor component files with the *.nijor page itself. Although this is not an issue for most projects, it can cause problems with increased loading time, resulting in a bad user experience. To overcome this problem, Nijor includes a built-in feature called code-splitting. By code-splitting your application, you can selectively lazy-load only the components that are currently required by the user, which can greatly enhance your app's performance. This approach does not reduce the overall amount of code in your app, but it does prevent loading of unnecessary code and reduces the amount of code needed during the initial load. All the pages in your app are lazy-loaded and there's no way to change it !

Lazy-loading a component

To lazy-load a component, just add the lazy attribute after it.

        
    
<card1 n:imported="components/card.nijor"/> <!--Without Lazy Loading--> <card2 n:imported="components/card.nijor" lazy/> <!--With Lazy Loading-->