Как добавлять только используемый js на страницу?

Question

[Кирилл]

Использую gulp и webpack для сборки. Раньше делал только одностраничные сайты. поэтому собирал все скрипты в 1 файл и все нормально работало.



Щас делаю многостраничный сайт и столкнулся с проблемой: На одной странице мне нужно использовать скрипт, а на другой нет. На той странице где скрипт не нужен появляется ошибка из-за отсутствия элемента, к которому он обращается и от этого весь js перестает работать:



По сути, многие js файлы хранятся внутри БЭМ блоков (папках), и было бы круто их добавлять только при использовании. Как это можно сделать и как это делать правильно?

Comments

[Владислав Лысков]

и далее для каждой страницы ты планируешь подключать свой jsник? не надо так

[Кирилл]

Владислав Лысков, я сюда и написал, чтобы мне подсказали как надо :)

[Владислав Лысков]

Кирилл, один общий джс и цсс файл для всего сайта, что бы они при переде со страницы на страницу на загружались заново, а отдавались из кэша браузера

[Александр]

Ну собирайте отдельные js-ники тогда. Из вопроса просто совсем не понятно чем вам помочь.
Вы написали gulp и webpack, еще больше не понятно. Зачем так?
В webpack может быть много "энтрисов".

[Кирилл]

Александр,

Александр,

webpack в gulp используется для модулей, вот

таск

const scripts = () => {
	return src('./src/js/main.js')
		.pipe(webpackStream({
			mode: 'development',
			output: {
				filename: 'main.js',
			},
			module: {
				rules: [{
					test: /\.m?js$/,
					exclude: /(node_modules|bower_components)/,
					use: {
						loader: 'babel-loader',
						options: {
							presets: ['@babel/preset-env']
						}
					}
				}]
			},
		}))
		.on('error', function (err) {
			console.error('WEBPACK ERROR', err);
			this.emit('end'); // Don't stop the rest of the task
		})

		.pipe(sourcemaps.init())
		.pipe(uglify().on("error", notify.onError()))
		.pipe(sourcemaps.write('.'))
		.pipe(dest('./build/js'))
		.pipe(browserSync.stream());
}

Проблема возникла из-за того, что плагины ищут элементы DOM на странице, не находят и вылезают ошибки. Щас придумал оборачивать весь код в каждом файле в if с проверкой на наличие нужных элементов на странице, но не знаю насколько это правильно. Мне интересно, как решают эти моменты люди с опытом, какие практики лучше.

[Александр]

ну gulp + webpack уже не бэстпрактис.
и я уже писал "В webpack может быть много "энтрисов"."
т.е. можно настроить webpack с несколькими точками входа (в ввашем случае это js фалы для отдельных страниц)
в каждой js точке входа import-ите только то что вам нужно и т.д.

[xmoonlight]

Владислав Лысков, зачем весь js таскать, если большинство функционала оттуда может и не потребоваться ни разу.
Достаточно кешировать только используемые части всего имеющегося в js-функционала по мере необходимости.

[Кирилл]

Александр, спасибо за идею, пока к настройке вебпака не готов, но обязательно изучу вопрос в будущем.

[Кирилл]

xmoonlight, это реализуется с помощью webpack?

[xmoonlight]

Кирилл, нет. includeHTML для этого.
Спасибо за звёзды!