Как организовать структуру хранения javascrirpt-файлов для многостраничного сайта?

Question

[Сергей Малинин]

Допустим, есть большой многостаничный сайт. На разных страницах этого сайта может использовать разный javascript-код.

Например, на главной странице нужен скрипт для слайдера, а для большинства других страниц он не нужен.
И подобных случаев может быть много.

Как именно в таком случае хранить javascript и вызывать необходимый код на страницах?

Вижу, что многие собирают JS-код с помощью сборщиков проектов в один файл и подключает его на всех страницах сайта. Выходит, нужно прописывать в самом скрипте условие, когда кусок кода выполняется, а когда нет?

Например, в случае со слайдером, можно писать так:

const slider = document.querySelector("#slider");
if (slider) {
  do something 
}

В таком случае, код выполнится только на страницах, где есть элемент с id slider.
Правильный ли это подход? Как минимум, вижу ещё один вариант:

Собираем весь код в один главный index.js - там будут располагаться все классы, функции и т.п.
И дополнительно к этому пишем для каждой страницы отдельный JS, например, main.js. Там мы будем создавать инстансы классов, делать какие-то дополнительные манипуляции.

В итоге, на странице у нас будет подключен index.js, и main.js, который использует код из index.js

Какой подход в данном случае наиболее правильный?

Answer 1

[nowm]

Лично мне понравилось использование webpack. Я прописываю в конфиге все entry-файлы, а webpack потом за меня генерирует итоговый JS-файл. При этом, webpack во время генерации выдёргивает только тот код, который реально используется. Например, у меня есть файл functions.js:

export function function1() {
    alert('function 1');
}

export function function2 () {
    alert('function 2);
}

Далее, я создаю файл landing.js:

import {function1} from './functions';

function1();

После работы webpack будет создан файл, который содержит код из landing.js и functions.js, при этом function2 там не будет, потому что этот код не использовался.

Посоветовать хорошее руководство по конфигурации webpack не могу, потому что я разбирался с ним сам — по документации. Сразу предупреждаю, что это не самая простая технология для освоения, и у вас может уйти несколько часов на одно только написание конфига. Но его плюсы перевешивают минусы, так что советую попробовать.

P.S. На хабре есть много статей про webpack. Есть смысл начать поиски там. Я уверен, что среди over 900 статей там есть что-нибудь для новичков. Ну, или, гугл в помощь.

Answer 2

[Петр]

Есть же сборщики проектов. Пишите как вам удобно а он соберет все красиво потом.

Comments

[Сергей Малинин]

А красиво - это как? Сборщик настроит ровно таким образом, как мы ему скажем)
Вопрос в том, как именно в финальном бандле оно должно лежать?

К примеру, все общие скрипты мы выносим в один файл index.js как библиотеку, а на всех остальных страницах мы будем при необходимости обращаться к этому общему скрипты, создавать инстанс классов и т.п.

Либо же в самом index.js нужно произвести все необходимые вызовы сразу?

Answer 3

[Aetae]

Ну например если использовать webpack - можно указать несколько entry. Он сам соберёт отдельно по чанку на каждую entry и общий чанк для всех. Ну и можно настроить по вкусу более углублённо если нужно. Другие сборщики тоже так могут, думаю.