Production Builds

To be optimized for runtime performance exported documents load all components as soon as a page is loaded. After the components are loaded, their child nodes are immediately injected into the DOM and their animation definitions are added to the animation system. For heavily componentized UIs this might use a lot of memory and might make the load event quite slow.

Lazy display components

To reduce the number of DOM nodes we implemented the Lazy display components option which delays the injection of component DOM nodes until the component has to be shown on the page. To make use of that you have to not show all components in the first frame of a timeline, rather you need to delay them and use navigation methods like gotoAndStop.

Lazy animation states

To not instantiate the JavaScript objects of the animation system until needed we implemented the Export lazy animation states option. It transforms the resolution data of animation states into a function. This optimizes the "Compile code" step of JavaScript execution. When an element has to be shown by an animation system its animation data is instantiated. This delays computation for a node until the time it has to be shown.

Production mode

The exporter generates human-readable files. Though easier to understand, they are slower to compile and take more memory. For that, we implemented the Export in production mode option which minifies all generated files.

Full source output

However, if you want the full source to be exported at once with the minified you can use the Full source output option that is available when Export in production mode is enabled. If the option is empty the full source won't be exported. Always select a different output folder from the document's one for the full source to prevent the minified source from getting overwritten with the full one.

Note that if this option is used the export time may increase!

Load component option

To reduce the number of resources loaded at a page start we implemented the Load option for components. When unchecked components won't load their resources. This will transform their instances into placeholders that don't really do anything. To use components you have to load them manually via the following code.

window.prysm.componentSystem.loadComponents([
    { name: "component-name", url: "component-url" }
]);

This makes it possible to load components on demand.