Javascript Bootstrap 4：独立折叠js，用于响应导航栏

我用Bootstrap4.3.1创建了一个小网站，除了带有切换按钮的折叠插件外，它不需要javascript

Bootstrap 4已经没有了，所以我不得不加载69 kiB的

jquery-3.3.1.slim.min.js

，以及57 kiB的

Bootstrap.min.js

，这导致在小屏幕上下载126 kiB的Javascript作为交互式菜单切换按钮

---

我可以做些什么来减少用户的javascript下载量吗？

删除所有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>

const triggers=Array.from（document.querySelectorAll（'[data toggle=“collapse”]'）；
触发器。forEach（elem=>{
元素addEventListener（'单击'，事件=>{
常量选择器=elem.getAttribute（'data-target'）；
折叠（选择器，“切换”）；
});
});
常数fnmap={
“切换”：“切换”，
'显示'：'添加'，
“隐藏”：“删除”
};
常量折叠=（选择器，cmd）=>{
const targets=Array.from（document.querySelectorAll（selector））；
targets.forEach（target=>{
classList[fnmap[cmd]]（'show'）；
});
};

灵感来自