Load dynamic chunk only when dropdown is open

app/assets/javascripts/frequent_items/index.js

@@ -28,16 +28,11 @@ export default function initFrequentItemDropdowns() {
       return;
     }
 
-    $(navEl).on('shown.bs.dropdown', () => {
-      eventHub.$emit(`${namespace}-dropdownOpen`);
-    });
-
+    $(navEl).on('shown.bs.dropdown', () =>
+      import('./components/app.vue').then(({ default: FrequentItems }) => {
         // eslint-disable-next-line no-new
         new Vue({
           el,
-      components: {
-        FrequentItems: () => import('./components/app.vue'),
-      },
           data() {
             const { dataset } = this.$options.el;
             const item = {
@@ -55,7 +50,7 @@ export default function initFrequentItemDropdowns() {
             };
           },
           render(createElement) {
-        return createElement('frequent-items', {
+            return createElement(FrequentItems, {
               props: {
                 namespace,
                 currentUserName: this.currentUserName,
@@ -64,5 +59,9 @@ export default function initFrequentItemDropdowns() {
             });
           },
         });
+
+        eventHub.$emit(`${namespace}-dropdownOpen`);
+      }),
+    );
   });
 }