Remove sanitize-html dependency from the main bundle

app/assets/javascripts/frequent_items/index.js

 import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import eventHub from '~/frequent_items/event_hub';
-import frequentItems from './components/app.vue';
+import eventHub from './event_hub';
 
 Vue.use(Translate);
 
@@ -17,7 +16,7 @@ const frequentItemDropdowns = [
   },
 ];
 
-const initFrequentItemDropdowns = () => {
+export default function initFrequentItemDropdowns() {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
@@ -37,7 +36,7 @@ const initFrequentItemDropdowns = () => {
     new Vue({
       el,
       components: {
-        frequentItems,
+        FrequentItems: () => import('./components/app.vue'),
       },
       data() {
         const { dataset } = this.$options.el;
@@ -66,8 +65,4 @@ const initFrequentItemDropdowns = () => {
       },
     });
   });
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  requestIdleCallback(initFrequentItemDropdowns);
-});
+}

app/assets/javascripts/main.js

@@ -28,7 +28,7 @@ import initLayoutNav from './layout_nav';
 import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
-import './frequent_items';
+import initFrequentItemDropdowns from './frequent_items';
 import initBreadcrumbs from './breadcrumb';
 import initUsagePingConsent from './usage_ping_consent';
 import initPerformanceBar from './performance_bar';
@@ -107,6 +107,7 @@ function deferredInitialisation() {
   initUsagePingConsent();
   initUserPopovers();
   initBroadcastNotifications();
+  initFrequentItemDropdowns();
 
   const recoverySettingsCallout = document.querySelector('.js-recovery-settings-callout');
   PersistentUserCallout.factory(recoverySettingsCallout);