Code splitting

Code splitting — это техника оптимизации загрузки JavaScript-кода, позволяющая разбивать приложение на отдельные модули и загружать их по мере необходимости. В библиотеке Mind.js это реализуется через динамическую загрузку компонентов и использование асинхронных модулей, что снижает время первоначальной загрузки и улучшает производительность.

Разделение кода на модули

Mind.js поддерживает модульную архитектуру, что позволяет разделять код на функциональные блоки:

import { NeuralNetwork } from 'mindjs';

const net = new NeuralNetwork({
    inputSize: 3,
    hiddenLayers: [5],
    outputSize: 1
});

Каждый модуль можно подключать отдельно, благодаря чему основной бандл остаётся лёгким. Для динамической загрузки используется синтаксис import():

async function loadNetworkModule() {
    const { NeuralNetwork } = await import('mindjs');
    const net = new NeuralNetwork({ inputSize: 2, hiddenLayers: [4], outputSize: 1 });
    return net;
}

Асинхронная и ленивое подключение компонентов

Mind.js позволяет загружать нейросети и данные только тогда, когда они реально нужны. Это снижает потребление памяти и ускоряет работу приложения. Пример ленивой загрузки модели:

let model;

async function getModel() {
    if (!model) {
        const { NeuralNetwork } = await import('mindjs');
        model = new NeuralNetwork({ inputSize: 2, hiddenLayers: [3], outputSize: 1 });
    }
    return model;
}

При таком подходе основная часть кода загружается сразу, а ресурсоёмкие модули подключаются по требованию.

Оптимизация бандла с помощью Webpack

Mind.js прекрасно интегрируется с системами сборки типа Webpack. Для эффективного code splitting используется директива /* webpackChunkName: "chunk-name" */:

async function loadAdvancedNetwork() {
    const { NeuralNetwork } = await import(
        /* webpackChunkName: "advanced-network" */ 'mindjs'
    );
    return new NeuralNetwork({ inputSize: 5, hiddenLayers: [10, 5], outputSize: 2 });
}

Это позволяет явно задавать имена отдельных чанков, облегчая отладку и кэширование.

Разделение логики обучения и предсказаний

В Mind.js рекомендуется разделять код обучения нейросети и код, выполняющий предсказания. Это уменьшает размер бандла, загружаемого на клиентскую сторону. Пример:

Обучение (сервер):

import { NeuralNetwork } from 'mindjs';

const net = new NeuralNetwork({ inputSize: 3, hiddenLayers: [5], outputSize: 1 });
net.train([{ input: [0,1,0], output: [1] }]);
export const trainedModel = net.toJSON();

Предсказания (клиент, лениво):

let net;

async function predict(input) {
    if (!net) {
        const { NeuralNetwork } = await import('mindjs');
        net = NeuralNetwork.fromJSON(await fetch('/trainedModel.json').then(res => res.json()));
    }
    return net.run(input);
}

Разграничение больших моделей и утилит

В проектах с Mind.js большие модели и утилиты для обработки данных можно разделять на отдельные модули. Это позволяет загружать тяжелые части кода только при необходимости:

async function loadUtilities() {
    const utils = await import('./utils/dataProcessing.js');
    return utils;
}

Такая организация повышает читаемость кода, ускоряет сборку и уменьшает задержку при инициализации приложения.

Пакетирование и кэширование

Code splitting совместно с кэшированием чанков позволяет значительно уменьшить количество повторных загрузок. Mind.js-модули можно хранить в отдельных бандлах и загружать с CDN, используя хеширование файлов:

const networkModule = await import(`/cdn/mindjs-network.${hash}.js`);

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

Динамическая подгрузка данных для обучения

Для больших датасетов целесообразно загружать данные частями, используя асинхронные функции. Например:

async function loadTrainingData(batch) {
    const response = await fetch(`/data/batch_${batch}.json`);
    const data = await response.json();
    return data;
}

В сочетании с динамической загрузкой моделей это позволяет строить масштабируемые приложения с Mind.js, минимизируя нагрузку на клиент и сеть.

Совместимость с современными фреймворками

Mind.js с code splitting интегрируется с React, Vue и другими фронтенд-фреймворками. Компоненты, использующие нейросети, можно загружать лениво через динамический импорт:

const NeuralComponent = React.lazy(() => import('./NeuralComponent.js'));

Таким образом достигается минимальный вес основного бандла и высокая отзывчивость интерфейса.

Оглавление