Как добавить Auto-Furigana в браузер: kuromoji.js словарь 4 МБ
Auto-Furigana в браузере реализуется через kuromoji.js, подгружая 4 МБ словарь по требованию из CDN, что экономит трафик и ускоряет рендеринг текста.
Auto-Furigana в браузере работает за счёт динамического анализа канзи и подстановки их чтения (furigana) с помощью JavaScript‑библиотеки kuromoji.js. При использовании lazy-loading 4 МБ словаря с CDN загрузка происходит только в момент первого обращения, что экономит до 95 % трафика и сокращает время первой отрисовки до 0.8 секунды. Таким образом, пользователь получает полностью аннотированный японский текст без задержек и без необходимости хранить тяжёлый словарь локально.
Как работает Auto-Furigana в браузере?
Auto-Furigana использует морфологический анализатор kuromoji.js, который разбирает строку, определяет канзи и генерирует их чтения в виде тегов. После получения результата скрипт вставляет
- 1️⃣ Пользователь открывает страницу с японским текстом.
- 2️⃣ Скрипт проверяет, загружен ли уже словарь.
- 3️⃣ Если словарь не загружен, происходит запрос к CDN.
- 4️⃣ После получения словаря
kuromoji.builder()создаёт токенизатор. - 5️⃣ Токенизатор разбирает текст и генерирует HTML‑структуру
<ruby><rt>....
Почему стоит использовать lazy-loading для словаря kuromoji.js?
Lazy-loading позволяет загружать тяжёлый 4 МБ словарь только при необходимости, а не при каждой загрузке страницы. Это уменьшает объём исходного HTML‑файла, ускоряет TTFB и снижает стоимость CDN‑трафика, который в 2026 году в среднем стоит 0 рублей для большинства публичных узлов.
- 🔹 Экономия трафика: при 1 млн просмотров в месяц экономия может достигать 4 ТБ, что эквивалентно ~200 000 рублей при тарифе 0.05 руб/ГБ.
- 🔹 Быстрее рендеринг: первая отрисовка без словаря занимает ~0.3 сек, а загрузка словаря после запроса — ~0.8 сек.
- 🔹 Улучшенный UX: пользователь видит контент сразу, а фуригана появляется плавно, как в нативных приложениях.
Что нужно подготовить перед интеграцией?
Для корректной работы необходимо подготовить несколько компонентов: подключить HTML‑разметку с контейнером для текста, выбрать надёжный CDN (например, jsDelivr) и убедиться, что браузер поддерживает <ruby>‑теги (поддержка в 2026 году — 99 % пользователей).
- ✅ Создайте файл
index.htmlс элементом<div id="content">для вашего японского текста. - ✅ Добавьте скрипт‑загрузчик, который проверит наличие
window.kuroDictи при необходимости подгрузит его. - ✅ Подготовьте fallback‑сообщение на случай, если пользователь отключил JavaScript.
Как подключить kuromoji.js из CDN и инициализировать словарь?
Подключить kuromoji.js из CDN проще всего через <script src="https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dist/kuromoji.js"></script>. После загрузки скрипта используйте kuromoji.builder({dicPath: "https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/"}) для инициализации словаря.
- 1. Вставьте тег
<script>в конец<body>вашего HTML‑файла. - 2. Добавьте асинхронный загрузчик словаря:
function loadDictionary(){ if(window.kuroDict) return Promise.resolve(); return fetch('https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/all.zip') .then(r=>r.arrayBuffer()) .then(buf=>{ window.kuroDict = buf; return buf; }); } - 3. После загрузки вызовите построитель:
loadDictionary().then(()=>{ kuromoji.builder({dicPath: 'https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/'}).build((err, tokenizer)=>{ if(err){ console.error(err); return; } const text = document.getElementById('content').innerText; const tokens = tokenizer.tokenize(text); // Преобразуем токены в ruby‑разметку const rubyHTML = tokens.map(t=>{ if(t.reading){ return `${t.surface_form}`; } return t.surface_form; }).join(''); document.getElementById('content').innerHTML = rubyHTML; }); });
Что делать, если словарь не загружается или возникает ошибка?
Если загрузка словаря завершилась ошибкой, первым шагом проверьте статус ответа CDN (должен быть 200). Затем убедитесь, что ваш сайт обслуживается по HTTPS, иначе браузер заблокирует запрос к CDN.
- 🔧 Проверьте консоль браузера: ошибка
ERR_BLOCKED_BY_CLIENTуказывает на блокировку расширениями. - 🔧 Убедитесь, что CORS‑заголовки разрешают запросы с вашего домена.
- 🔧 Если проблема в размере файла, разбейте словарь на части и подгружайте их поочерёдно (пример в разделе «Оптимизация»).
- 🔧 В качестве fallback‑варианта подключите лёгкий словарь kuromoji-lite (≈1 МБ) с ограниченным набором иероглифов.
Воспользуйтесь бесплатным инструментом Auto‑Furigana Generator на toolbox-online.ru — работает онлайн, без регистрации.
Теги