Lazy Import of the Engine Module

Code Splitting#

Keep in mind that the CreativeEngine bundle has a substantial size. Depending on your use case, it might make sense to delay loading of the module, using a dynamic import statement:

Consult your bundler's documentation for more information:

Code Splitting | Webpack
Rollup.js
Parcel

You can also make use of code splitting in the browser, without a bundler. It works in the same way, but you would load our code from the CDN.


// When using node modulues in a bundler:
async function loadCreativeEngine() {
  const module = await import('@cesdk/engine');
  const CreativeEngine = module.default;
  return CreativeEngine;
}

// When loading the engine module directly from the CDN:
async function loadCreativeEngine() {
  const module = await import('https://cdn.img.ly/packages/imgly/cesdk-engine/1.24.0/index.js');
  const CreativeEngine = module.default;
  return CreativeEngine;
}