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

Допустим, есть большой многостаничный сайт. На разных страницах этого сайта может использовать разный 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

Какой подход в данном случае наиболее правильный?
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ответы на вопрос 3
nowm
@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 статей там есть что-нибудь для новичков. Ну, или, гугл в помощь.
Ответ написан
Комментировать
Morpheus_God
@Morpheus_God
Есть же сборщики проектов. Пишите как вам удобно а он соберет все красиво потом.
Ответ написан
Aetae
@Aetae Куратор тега JavaScript
Тлен
Ну например если использовать webpack - можно указать несколько entry. Он сам соберёт отдельно по чанку на каждую entry и общий чанк для всех. Ну и можно настроить по вкусу более углублённо если нужно. Другие сборщики тоже так могут, думаю.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы