Зачем во Vue к файлам добавляется hash?

Хеширование файлов в Vue (и других сборщиках)

Основное назначение

Hash в именах файлов (например app.a1b2c3d4.js) добавляется для решения проблемы кэширования браузером. Когда содержание файла меняется, меняется и его хеш, что заставляет браузер загрузить новую версию вместо использования устаревшего кеша.

Проблема без хеша

Сценарий: Пользователь видит старый код

День 1: Версия 1.0 приложения - браузер загружает app.js и кеширует его День 15: Выпуск версии 2.0 - на сервере файл app.js перезаписывается, но имя одинаковое Результат: браузер не загружает новую версию, пользователь видит версию 1.0 (БАГ!)

Если обновить авторизацию, UI компоненты и API endpoints одновременно, разные пользователи получат несовместимые части кода = ОШИБКИ!

Решение: Hash в именах файлов

Со включением hash в конфиг сборщика:

БЕЗ HASH: app.js, chunk.js (имена всегда одинаковые)
С HASH:   app.a1b2c3d4.js, chunk.x9y8z7w6.js (разные имена при изменении)

Как это работает

Загрузка версии 1.0

HTML:

<script src="/js/app.a1b2c3d4.js"></script>
<link rel="stylesheet" href="/css/style.9x8y7z6w.css">

Браузер кеширует оба файла с этими хешами.

Обновление на версию 2.0

Новый HTML:

<script src="/js/app.x9y8z7w6.js"></script>
<link rel="stylesheet" href="/css/style.3a4b5c6d.css">

Всё изменилось! Браузер видит новые имена файлов и загружает их свежими.

Типы хешей в Webpack

// [hash] — хеш для всей сборки (неэффективно)
filename: 'app.[hash].js'

// [contenthash] — хеш содержимого конкретного файла (ЛУЧШЕ)
filename: 'app.[contenthash].js'

// [chunkhash] — хеш chunk-а
filename: 'app.[chunkhash].js'

// С именами
filename: '[name].[contenthash].js'
// Результат: app.a1b2c3d4.js, vendor.x9y8z7w6.js

Пример Vue приложения

// vite.config.js (Vue 3)
export default {
  build: {
    rollupOptions: {
      output: {
        // JS файлы
        entryFileNames: 'js/[name].[hash].js',
        // CSS файлы
        assetFileNames: 'css/[name].[hash][extname]',
        // Чанки
        chunkFileNames: 'js/[name].[hash].js'
      }
    }
  }
}

Результат сборки:

dist/
  index.html
  js/
    app.a1b2c3d4.js
    vendor.x9y8z7w6.js
    utils.p3q4r5s6.js
  css/
    style.8n7m6l5k.css
  img/
    logo.j2k3l4m5.png

Стратегия кеширования

HTML БЕЗ хеша (переподгружается каждый раз):

Cache-Control: max-age=300 (5 минут)

JS/CSS С хешом (кешируем долго, файл не меняется):

Cache-Control: max-age=31536000, immutable (1 год)

Процесс:

1. Браузер загружает index.html (свежий, 5 минут)
2. Парсит нужные файлы (app.a1b2c3d4.js и style.9x8y7z6w.css)
3. Если в кеше - берёт оттуда, если нет - загружает
4. Кеширует на 1 год
5. Когда выходит версия 2.0 с новыми хешами, браузер загружает их свежими

На примере Nginx конфига

server {
  listen 80;
  root /var/www/dist;

  # HTML файлы не кешируем
  location = /index.html {
    expires 5m;
    add_header Cache-Control "public, max-age=300, must-revalidate";
  }

  # JS/CSS с hash-ами кешируем долго
  location ~ \\.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
  }

  # Картинки
  location ~ \\.(png|jpg|gif|svg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
  }
}

Плюсы хеширования

1. Автоматическое инвалидирование кеша - браузер сам поймёт когда обновилось
2. Долгосрочное кеширование - можно кешировать на 1 год (быстро для постоянных пользователей)
3. CDN дружественно - CDN может долго хранить файлы безопасно
4. Параллельные версии - старые и новые версии соседствуют
5. Автоматическое версионирование - не нужно помнить версии в коде

Минусы и проблемы

Проблема 1: Большие изменения меняют хеши везде

Если изменился импорт в vendor:

const vendor = require('./vendor'); // Новый хеш!
// Теперь меняется хеш и у основного app файла
// Потому что app импортирует vendor

Решение: использовать splitChunks и правильную конфигурацию.

Проблема 2: Много файлов с хешами

Dist может содержать старые версии файлов. Решение: правильная стратегия хеша и configured Cache-Control.

Заключение

Hash в именах файлов — это необходимый механизм:

• Инвалидирование кеша - браузер знает когда загрузить новый
• Долгосрочное кеширование - 1 год для стабильных файлов
• Автоматическое версионирование - не нужны версии вручную
• Плавное обновление - старые и новые версии работают вместе

Это стандарт во всех современных сборщиках: Webpack, Vite, Next.js, Nuxt, Vue CLI.

Важно: hash в index.html НЕ нужен - HTML должна загружаться свежей каждый раз.