Минификация и оптимизация

Минификация — процесс удаления из исходного кода лишних символов, комментариев, пробелов и переносов строк без изменения поведения программы. В проектах с Tom Sel ect минификация влияет не только на скорость загрузки интерфейса, но и на производительность поиска, рендеринга элементов и инициализации компонентов формы.

Tom Sel ect активно используется в административных панелях, CRM, SPA-приложениях и сложных формах, где одновременно может существовать множество селекторов. При большом количестве экземпляров библиотеки размер итогового bundle-файла становится критически важным.

Основные задачи минификации

Минификация в контексте Tom Sel ect обычно решает несколько задач:

уменьшение размера JavaScript-бандла;
сокращение размера CSS;
удаление неиспользуемых плагинов;
оптимизация импортов;
уменьшение времени парсинга браузером;
ускорение первого рендера интерфейса;
снижение нагрузки на мобильные устройства.

Минифицированная версия Tom Select

В npm-пакете библиотеки уже присутствуют готовые минифицированные файлы:

<link rel="stylesheet" href="tom-select.default.min.css">
<script src="tom-select.complete.min.js"></script>

Файл tom-select.complete.min.js содержит:

ядро библиотеки;
встроенные плагины;
внутренние зависимости.

Размер complete-сборки значительно больше минимальной модульной конфигурации.

Использование модульной сборки

Наиболее эффективный способ оптимизации — импорт только необходимых частей библиотеки.

Полная сборка

import TomSelect fr om 'tom-select';

Подобный импорт может подтянуть:

все внутренние модули;
дополнительные плагины;
ненужный функционал.

Импорт отдельных плагинов

Tom Sel ect позволяет подключать плагины вручную.

Базовый импорт

import TomSelect fr om 'tom-select/base';

Подключение конкретного плагина

import TomSelect fr om 'tom-select/base';
import remove_button fr om 'tom-select/plugins/remove_button';

TomSelect.define('remove_button', remove_button);

Такой подход уменьшает итоговый размер bundle-файла.

Tree Shaking

Tree Shaking — механизм удаления неиспользуемого кода во время сборки проекта.

Наиболее эффективно работает в:

Webpack;
Rollup;
Vite;
esbuild.

Пример с Vite

import TomSelect from 'tom-select/base';

new TomSelect('#tags', {
    plugins: ['remove_button']
});

При правильной конфигурации сборщик удалит:

неиспользуемые плагины;
внутренние модули;
лишние функции.

Оптимизация CSS

Tom Sel ect поставляется с несколькими темами оформления:

default;
bootstrap4;
bootstrap5.

Подключение всех тем одновременно приводит к значительному увеличению CSS-файла.

Неоптимальный вариант

import 'tom-select/dist/css/tom-select.default.css';
import 'tom-select/dist/css/tom-select.bootstrap4.css';
import 'tom-select/dist/css/tom-select.bootstrap5.css';

Оптимальный вариант

import 'tom-select/dist/css/tom-select.default.css';

PurgeCSS и удаление неиспользуемых стилей

Tom Sel ect содержит множество CSS-классов, часть которых может никогда не использоваться в конкретном проекте.

PurgeCSS позволяет удалить:

неиспользуемые селекторы;
неактивные темы;
лишние состояния компонентов.

Конфигурация PurgeCSS

module.exports = {
    content: [
        './src/**/*.html',
        './src/**/*.js'
    ],
    css: [
        './node_modules/tom-select/dist/css/tom-select.default.css'
    ]
};

Минификация через Terser

Terser — стандартный минификатор JavaScript.

Конфигурация Webpack

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false
            })
        ]
    }
};

Terser выполняет:

удаление комментариев;
сокращение имён переменных;
удаление unreachable-кода;
сжатие выражений;
оптимизацию условий.

Удаление console.log

В production-сборках большое количество логов может влиять на производительность.

Конфигурация Terser

new TerserPlugin({
    terserOptions: {
        compress: {
            drop_console: true
        }
    }
})

Минификация через esbuild

esbuild работает значительно быстрее классических минификаторов.

Пример

require('esbuild').build({
    entryPoints: ['src/app.js'],
    bundle: true,
    minify: true,
    outfile: 'dist/app.js'
});

Преимущества:

высокая скорость сборки;
встроенная минификация;
эффективный tree shaking;
быстрая работа с ESM-модулями.

Rollup и оптимизация Tom Select

Rollup особенно эффективен для ESM-библиотек.

Конфигурация

import resolve fr om '@rollup/plugin-node-resolve';
import terser fr om '@rollup/plugin-terser';

export default {
    input: 'src/main.js',

    output: {
        file: 'dist/bundle.js',
        format: 'esm'
    },

    plugins: [
        resolve(),
        terser()
    ]
};

Code Splitting

Tom Sel ect не всегда нужен на всех страницах приложения.

Code splitting позволяет загружать библиотеку только там, где она действительно используется.

Динамический импорт

async function initSelect() {
    const { default: TomSelect } = await import('tom-select');

    new TomSelect('#users');
}

Преимущества:

уменьшение initial bundle;
ускорение загрузки страницы;
отложенная инициализация.

Lazy Loading селекторов

При большом количестве элементов полезно откладывать создание экземпляров Tom Sel ect.

Пример

const observer = new IntersectionObserver(entries => {
    entries.forEach(async entry => {
        if (entry.isIntersecting) {

            const { default: TomSelect } =
                await import('tom-select');

            new TomSelect(entry.target);

            observer.unobserve(entry.target);
        }
    });
});

document.querySelectorAll('.lazy-select')
    .forEach(el => observer.observe(el));

Удаление ненужных плагинов

Многие проекты используют только 1–2 плагина из полного набора.

Часто подключаемые плагины

remove_button
clear_button
dropdown_header
drag_drop
checkbox_options

Каждый плагин увеличивает:

размер bundle;
время парсинга;
время инициализации.

Оптимизация рендера

Tom Sel ect поддерживает кастомный рендеринг через функцию render.

Сложные шаблоны существенно замедляют интерфейс.

Неоптимальный рендер

render: {
    option(data) {
        return `
            <div class="option">
                <img src="${data.avatar}">
                <div>
                    <strong>${data.name}</strong>
                    <small>${data.email}</small>
                </div>
            </div>
        `;
    }
}

Проблемы:

большое количество DOM-узлов;
изображения;
вложенные контейнеры;
сложный layout.

Оптимизированный рендер

render: {
    option(data) {
        return `<div>${data.name}</div>`;
    }
}

Минимальный DOM ускоряет:

поиск;
вставку элементов;
скроллинг;
фильтрацию.

Оптимизация поиска

Tom Select использует внутренний механизм поиска по полям.

Чем больше полей участвует в поиске, тем выше нагрузка.

Неоптимальная конфигурация

searchField: [
    'name',
    'email',
    'company',
    'address',
    'department'
]

Оптимизированная конфигурация

searchField: ['name']

Ограничение количества результатов

Большие списки сильно нагружают DOM.

Ограничение результата поиска

maxOptions: 50

Преимущества:

уменьшение количества элементов;
ускорение рендера;
снижение потребления памяти.

Виртуализация списков

При работе с тысячами записей полезно использовать серверную фильтрацию вместо полной загрузки.

Неоптимальный вариант

options: hugeArray

Асинхронная загрузка

load(query, callback) {

    fetch(`/api/users?q=${query}`)
        .then(r => r.json())
        .then(data => callback(data));
}

Такой подход:

уменьшает объём памяти;
снижает нагрузку на браузер;
ускоряет initial render.

Debounce запросов

Без debounce Tom Select может отправлять множество запросов подряд.

Пример

loadThrottle: 300

Это уменьшает:

количество HTTP-запросов;
нагрузку на сервер;
количество повторных рендеров.

Оптимизация destroy()

При динамическом удалении компонентов важно корректно уничтожать экземпляры Tom Select.

Пример

const select = new TomSelect('#users');

select.destroy();

Без destroy():

остаются обработчики событий;
возникают утечки памяти;
сохраняются ссылки на DOM-узлы.

Минификация SVG и иконок

Некоторые плагины используют встроенные SVG-элементы.

SVG также нуждаются в оптимизации.

SVGO

npx svgo icon.svg

Gzip и Brotli

Даже минифицированные файлы желательно дополнительно сжимать на сервере.

nginx

gzip on;
gzip_types text/css application/javascript;

Brotli

brotli on;
brotli_types text/css application/javascript;

Brotli обычно обеспечивает лучшее сжатие JavaScript.

Source Maps

В production source maps часто отключают для уменьшения размера сборки.

Webpack

module.exports = {
    devtool: false
};

Оптимизация через CDN

Использование CDN уменьшает задержки загрузки.

Пример

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css"
/>

<script
    src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js">
</script>

HTTP-кеширование

Tom Select редко обновляется в production.

Для статических файлов полезно включать длительное кеширование.

nginx

location /assets/ {
    expires 1y;
    add_header Cache-Control "public";
}

Анализ размера bundle

Для поиска проблемных зависимостей используются анализаторы бандла.

Webpack Bundle Analyzer

npm install webpack-bundle-analyzer

Конфигурация

const BundleAnalyzerPlugin =
    require('webpack-bundle-analyzer')
        .BundleAnalyzerPlugin;

plugins: [
    new BundleAnalyzerPlugin()
]

Анализатор позволяет определить:

размер Tom Select;
вклад плагинов;
дублирование зависимостей;
неиспользуемые модули.

Производительность при большом количестве селекторов

Инициализация десятков экземпляров Tom Select одновременно может замедлять интерфейс.

Неоптимальный вариант

document.querySelectorAll('select')
    .forEach(el => new TomSelect(el));

Пакетная инициализация

requestIdleCallback(() => {

    document.querySelectorAll('select')
        .forEach(el => new TomSelect(el));

});

Оптимизация MutationObserver

Tom Select может использоваться вместе с динамическими интерфейсами.

Чрезмерное использование MutationObserver приводит к:

постоянным пересчётам DOM;
лишним repaint/reflow;
деградации производительности.

Наблюдатели следует ограничивать:

по области DOM;
по типам изменений;
по времени активности.

Сравнение подходов к оптимизации

Метод	Влияние на размер	Влияние на скорость
Tree shaking	Высокое	Среднее
Минификация JS	Среднее	Среднее
PurgeCSS	Высокое	Низкое
Code splitting	Высокое	Высокое
Lazy loading	Низкое	Высокое
Async load	Низкое	Высокое
Ограничение maxOptions	Низкое	Высокое
Удаление плагинов	Высокое	Среднее

Практическая production-конфигурация

Пример Vite-конфигурации

import { defineConfig } fr om 'vite';

export default defineConfig({

    build: {
        minify: 'esbuild',

        cssCodeSplit: true,

        sourcemap: false,

        rollupOptions: {
            output: {
                manualChunks: {
                    tomselect: ['tom-select']
                }
            }
        }
    }

});

Оптимизированная инициализация Tom Select

import TomSelect fr om 'tom-select/base';
import remove_button fr om
    'tom-select/plugins/remove_button';

TomSelect.define(
    'remove_button',
    remove_button
);

document.querySelectorAll('.select')
    .forEach(el => {

        new TomSelect(el, {

            plugins: ['remove_button'],

            maxOptions: 30,

            loadThrottle: 300,

            searchField: ['name']

        });

    });

Такая конфигурация обеспечивает:

минимальный размер bundle;
высокую скорость инициализации;
низкую нагрузку на DOM;
быструю фильтрацию;
эффективную работу на мобильных устройствах.