Настройка имен файлов в итоговой сборке

По умолчанию команда astro build помещает все ресурсы (JS, CSS, изображения) в папку _astro с хешированными именами (например, _astro/index.DRf8L97S.js). Это идеально подходит для длительного кеширования.

Однако иногда требуется изменить это поведение, например для обхода блокировщиков рекламы (если файл называется ads.js) или для соблюдения корпоративных стандартов именования.

Инструкция

Мы настроим vite.build.rollupOptions, чтобы файлы группировались по папкам js, static и т.д.

1. Добавьте настройки Rollup в astro.config.mjs:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     vite: {
       build: {
         rollupOptions: {
           output: {
             // Пути указываются относительно папки `outDir` (по умолчанию `dist`)
             entryFileNames: 'js/[name]-[hash].js',
             chunkFileNames: 'js/chunks/[name]-[hash].js',
             assetFileNames: 'static/[name]-[hash][extname]',
           },
         },
       },
     },
   });

   Используемые маски:

   • [name]: Оригинальное имя файла.
   • [hash]: Хеш контента (необходим для сброса кеша при обновлении файла).
   • [extname]: Расширение файла с точкой (например, .css).

2. Соберите проект командой npm run build.

3. Проверьте результат в папке dist/.

   Ваша структура теперь будет выглядеть примерно так:

   • Директорияdist/

     • Директорияjs/

       • index-a1b2c3d4.js
     • Директорияstatic/

       • styles-m3n4o5p6.css
       • logo-e5f6g7h8.svg
     • index.html