Skip to content

Package Size

Josselin Guillozet edited this page Oct 4, 2023 · 4 revisions

Target version: 3.1+

To deliver a cutting-edge product, we rely on many techniques that are at the forefront of modern web technologies, such as feature detection within the browser, and high quality image capture and encoding that go outside the remits of WebRTC.

With that in mind, we have a lot of code, binaries and models that need to be loaded. We must therefore remain vigilant in keeping the package size down so that our SDK doesn't have an unduly large impact on our customer's app bundles. We must also balance convenience for the integrator, loading speed, actual web performance, ease of integration and openness for configuration in a landscape that's constantly changing and improving!

We build a UMD formatted bundle with Webpack and expose two entrypoints:

  • iProovMe - this is the main entrypoint that contains everything that's needed to run an iProov transaction. However, this is larger of the two, coming in around 650KB post-gzip. You deal with this entrypoint when you use our script tag integration, or when you import our module in your frontend without specifying a specific file (it's specified as main in the package.json).
  • iProovSupport - this is the auxiliary entrypoint that contains our standalone support checker only, coming in at 12KB post-gzip. This can be used to determine whether you need to load the iProovMe component, which we recommend you do in a separate chunk in your bundler configuration.

External dependencies such as web workers, WebAssembly files, CSS, fonts and images are loaded in parallel, on demand.

Inside your frontend JS that's using a modern bundler (Webpack, Parcel, Rollup et al), you can import the full component like so:

import { iProovMe } from "@iproov/web-sdk"

Or just the support component like so:

import { iProovSupport } from "@iproov/web-sdk/iProovSupport"

To learn more about serving external dependencies, see Serving Assets.

Clone this wiki locally