Общий кусок в Vite

Общий кусок выносит повторяющийся модуль в отдельный файл сборки.

Если два входных скрипта импортируют один src/shared.js, дублировать его в каждом бандле не нужно. Rolldown при сборке выносит общий код в отдельный файл-кусок. По умолчанию разбиение включено, и общий модуль уходит в свой файл с хешем в имени.

Перечислим обе страницы в поле input:

import { defineConfig } from 'vite'

export default defineConfig({
  input: {
    main: 'index.html',
    about: 'about.html',
  },
})

Вторая страница подключает свой модуль:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>about</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/about.js"></script>
  </body>
</html>

Общий модуль экспортирует строку:

export const text = 'hello'

Оба входных файла берут одно значение:

import { text } from './shared.js'

document.querySelector('#app').textContent = text

Модуль второй страницы устроен так же:

import { text } from './shared.js'

document.querySelector('#app').textContent = text

Выполним сборку:

npm run build

В dist/assets кроме файлов, привязанных к index.html и about.html, появится ещё один JavaScript-файл с хешем в имени - это общий кусок из src/shared.js. В обоих html есть ссылка на этот файл, и на каждой странице видно hello.

Создайте src/common.js с экспортом ready, подключите его из src/main.js и src/about.js, соберите проект и найдите в dist/assets отдельный JavaScript-файл помимо скриптов двух страниц.

Откройте dist/index.html и dist/about.html, сравните адреса общего куска и убедитесь, что на обеих страницах выводится ready.