Bootstrap 4: автономный коллапс js для отзывчивого navbar

Question

Я создал небольшой веб-сайт с Bootstrap 4.3.1, и для него не требуется JavaScript, кроме плагина коллапса для отзывчивой навигационной панели с кнопкой переключения.

Нет customizer больше для Bootstrap 4, поэтому я вынужден загрузить jquery-3.3.1.slim.min.js с 69 КБ и bootstrap.min.js с 57 КБ, что приводит к загрузке Javascript на 126 КБ для интерактивной кнопки переключения меню на маленьких экранах.

Что я могу сделать, чтобы уменьшить размер загрузки javascript для моих пользователей?

Answer 1

Удалите все jQuery и загрузочный javascript и добавьте следующее:

  <script type="text/javascript">
   const triggers = Array.from(document.querySelectorAll('[data-toggle="collapse"]'));
   triggers.forEach(elem => {
       elem.addEventListener('click', event => {
           const selector = elem.getAttribute('data-target');
           collapse(selector, 'toggle');
       });
   });

   const fnmap = {
       'toggle': 'toggle',
       'show': 'add',
       'hide': 'remove'
   };

   const collapse = (selector, cmd) => {
       const targets = Array.from(document.querySelectorAll(selector));
       targets.forEach(target => {
           target.classList[fnmap[cmd]]('show');
       });
   };
  </script>

Вдохновленный https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7