Измерение размера бандла и стратегии его уменьшения

ONNX Runtime Web (ORT Web) предоставляет возможность запускать модели машинного обучения в браузере на JavaScript. Библиотека поддерживает как WebAssembly (WASM), так и WebGL для ускорения вычислений на клиентской стороне. Основной объект для работы — ort.InferenceSession, который позволяет загружать модель, выполнять инференс и получать результаты.

Пример базовой загрузки модели и выполнения инференса:

const session = await ort.InferenceSession.create('model.onnx');

const feeds = {
  input: new ort.Tensor('float32', inputData, [1, 3, 224, 224])
};

const results = await session.run(feeds);
const output = results.output.data;

Здесь важно понимать, что размер модели напрямую влияет на время загрузки и использование памяти в браузере. Чем больше модель, тем дольше клиент ждет загрузки, а инференс требует больше оперативной памяти.

Методы измерения размера бандла

Размер бандла в контексте ONNX Runtime Web включает модель ONNX, скрипты JavaScript, и WASM или WebGL backend. Основные подходы к измерению:

  1. Размер файла модели ONNX Простейший способ — посмотреть размер файла .onnx на диске. Он обычно коррелирует с временем загрузки в браузер. Для точного измерения в рантайме можно использовать fetch и свойство response.headers.get('content-length'):

    const response = await fetch('model.onnx');
const size = response.headers.get('content-length');
console.log(`Размер модели: ${size} байт`);

  2. Размер загружаемых скриптов ORT Web Включает основной скрипт ort.min.js и WASM модули (ort-wasm.wasm, ort-wasm-simd.wasm). Их размер можно оценить через инструменты сборки (Webpack, Vite) или DevTools браузера.

  3. Динамическая оценка памяти Использование performance.memory в Chrome позволяет понять, сколько памяти занимает модель и данные инференса во время работы.

    console.log(performance.memory.usedJSHeapSize);

Стратегии уменьшения размера бандла

1. Оптимизация модели ONNX

  • Удаление лишних операторов и слоёв: использование инструментов типа onnx-simplifier.
  • Квантизация: перевод весов из float32 в int8 или float16 снижает размер модели до 4–8 раз без существенной потери качества.
  • Разделение модели на несколько частей: загрузка больших моделей частями (например, encoder/decoder) позволяет отложить загрузку неиспользуемых слоёв.

2. Использование ленивой загрузки WASM ORT Web позволяет загружать разные backend модули по мере необходимости. Если в проекте не используется SIMD, можно отказаться от ort-wasm-simd.wasm, оставив только базовый WASM.

3. Минификация и tree-shaking JavaScript Сборка скриптов через Webpack, Rollup или Vite с включённой опцией tree-shaking убирает неиспользуемый код ORT Web, снижая общий размер бандла.

4. Компрессия и кэширование

  • Gzip/Brotli: сервер должен отдавать модель и скрипты с поддержкой сжатия.
  • Service Worker: кэширование модели в IndexedDB для повторного использования без повторной загрузки.

5. Выбор backend по ситуации

  • WebGL подходит для больших моделей на GPU, но увеличивает размер бандла из-за зависимостей.
  • WASM минимален, но медленнее. Стратегический выбор backend позволяет уменьшить общий вес бандла.

Практические рекомендации

  • Сначала провести анализ размера .onnx модели. Если модель >50 МБ, стоит рассмотреть квантизацию.
  • Проверять реальные размеры бандлов через DevTools, измеряя загружаемые ресурсы и используемую память.
  • Для приложений с медленным интернетом или мобильных устройств обязательно применять ленивую загрузку WASM и компрессию модели.
  • Сокращение бандла через tree-shaking не влияет на точность инференса, но уменьшает время загрузки скриптов.

Эти подходы позволяют держать бандл лёгким, ускоряют загрузку и сокращают использование оперативной памяти в браузере, что критично для приложений на ONNX Runtime Web с большими моделями.

Оглавление