Раньше делал отдельные файлы под каждый тип страницы: Категория, Карточка товара, Корзина и тп.
Сейчас пришел к одному (точнее 2-м) файлам: первый - библиотеки, второй - свой JS.
В исходниках - это отдельные файлы-модули, которые gulp-ом собираются в один обсуфицированный файл.
Модули подключаю для каждого типа страницы свои (кроме общих для всего сайта).
Делаю так:

// общие для всех страниц модули
$(() => {
	site.cart.drawCart();
	site.theme.init();
	site.common.init();
	site.forms.init();
	site.cart.init();
	site.search.init();
	site.theme.initHorizontalSliders();

	// модули в зависимости от типа страницы
	switch (method) {
		case 'content':
			switch (pageId) {
				case 0:
				  break;
				default:
			}
			break;
		case 'category':
			site.category.init();
			break;
		case 'object':
			site.object.init();
			site.category.init();
			break;
		case 'cart':
			site.cart.initCartPage();
			break;
		case 'purchasing_one_step':
			break;
		default:
	}
});

В итоге получаем один файл и время выполнения скриптов уменьшается.
Задание в gulp примерно такое:

gulp.task('uglify:js', () => {
  return gulp.src(path.src_js + '/**/*.js')
      .pipe(concat('theme.min.js'))
      .pipe(babel({
        presets: ['@babel/env']
      }))
      .pipe(uglify())
      .pipe(rename({ basename: dateNow}))
      .pipe(gulp.dest(path.dist_js_theme));
});

Можно например так:

$().fancybox({
    selector : '.owl-item:not(.cloned) a'
});