Skip to content

Improve Performance

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:

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

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 loading the engine module directly from the CDN:
async function loadCreativeEngine() {
  const module = await import(
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js'
  );
  const CreativeEngine = module.default;
  return CreativeEngine;
}