Оптимизация кэширования для PWA на Vite/React

TL;DR: В статье рассматриваются подходы к реализации кэширования для PWA на Vite/React, включая использование плагинов и кастомных решений для работы с динамически хэшированными файлами.

Введение

Создание Progressive Web Apps (PWA) на стеке Vite/React становится все более популярным благодаря производительности и удобству разработки. Однако одна из ключевых задач — это эффективное кэширование ресурсов, таких как маршруты, CSS и JavaScript файлы. Особенно сложно это становится из-за того, что Vite динамически изменяет имена файлов, добавляя хэши. В этой статье мы рассмотрим методы решения этой проблемы, включая использование плагинов и кастомных подходов.

Основная часть

Проблема динамически именованных файлов

В процессе сборки Vite добавляет хэши к именам файлов, что делает невозможным их явное указание в Service Worker для предварительного кэширования. Например, файл main.js может быть преобразован в main.123abc.js.

Использование vite-pwa-plugin

Одним из популярных решений является использование плагина vite-pwa-plugin. Этот плагин автоматически генерирует Service Worker и предварительно кэширует все статические ресурсы, включая динамически именованные файлы.

npm install vite-plugin-pwa --save-dev

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'My PWA',
        short_name: 'PWA',
        description: 'My Progressive Web App',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
});

Безопасность и депрекейтед зависимости

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

Кастомное решение для кэширования

Если использование плагина не подходит, можно реализовать кастомное решение для кэширования динамически именованных файлов. Например, можно использовать workbox-build для генерации Service Worker с учетом хэшированных имен файлов.

npm install workbox-build --save-dev

const { generateSW } = require('workbox-build');

generateSW({
  globDirectory: 'dist',
  globPatterns: ['**/*.{js,css,html,png,svg}'],
  swDest: 'dist/service-worker.js',
}).then(({count, size}) => {
  console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

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

Интеграция с React Router

Для эффективного кэширования маршрутов в React Router можно использовать стратегию NetworkFirst в Service Worker. Это позволит загружать маршруты из сети, если они доступны, и использовать кэш в случае отсутствия соединения.

import { NetworkFirst } from 'workbox-strategies';

workbox.routing.registerRoute(
  ({url}) => url.pathname.startsWith('/app/'),
  new NetworkFirst()
);

Обновление кэша

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

import { StaleWhileRevalidate } from 'workbox-strategies';

workbox.routing.registerRoute(
  ({url}) => url.pathname.endsWith('.js'),
  new StaleWhileRevalidate()
);

Заключение

Эффективное кэширование динамически именованных файлов в PWA на стеке Vite/React требует внимательного подхода. Использование плагинов, таких как vite-pwa-plugin, может значительно упростить процесс, но важно учитывать вопросы безопасности. Кастомные решения на основе workbox-build предоставляют большую гибкость и контроль. В конечном итоге, выбор метода зависит от специфики проекта и требований безопасности.

Источник: https://www.reddit.com/r/reactjs/comments/1rlqjlc/vitereact_pwa_caching/