diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 7a6bbb5c24928a7234bd0fb2fecc360fd93589e7..972815a30f80304974e643cae462b25d30f56716 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -24,11 +24,14 @@ import './confirm_danger_modal';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
 import initTodoToggle from './header';
+import conditionallyLoadProjectDropdown from './projects_dropdown_loader';
 import initImporterStatus from './importer_status';
 import initLayoutNav from './layout_nav';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
 import './milestone_select';
+import './preview_markdown';
+import './project_import';
 import './projects_dropdown';
 import './render_gfm';
 import initBreadcrumbs from './breadcrumb';
@@ -75,6 +78,7 @@ $(() => {
   initImporterStatus();
   initTodoToggle();
   initLogoAnimation();
+  conditionallyLoadProjectDropdown();
 
   // Set the default path for all cookies to GitLab's root directory
   Cookies.defaults.path = gon.relative_url_root || '/';
diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js
index e78ebce29238db27b50c4f85b182eb31c55daf4a..077ebacacdd1c70a0c8e8bb3f8e89490dfd45a4e 100644
--- a/app/assets/javascripts/projects_dropdown/index.js
+++ b/app/assets/javascripts/projects_dropdown/index.js
@@ -9,10 +9,10 @@ import projectsDropdownApp from './components/app.vue';
 
 Vue.use(Translate);
 
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.getElementById('js-projects-dropdown');
-  const navEl = document.getElementById('nav-projects-dropdown');
+const el = document.getElementById('js-projects-dropdown');
+const navEl = document.getElementById('nav-projects-dropdown');
 
+function dropdownOpened() {
   // Don't do anything if element doesn't exist (No projects dropdown)
   // This is for when the user accesses GitLab without logging in
   if (!el || !navEl) {
@@ -22,44 +22,50 @@ document.addEventListener('DOMContentLoaded', () => {
   $(navEl).on('shown.bs.dropdown', () => {
     eventHub.$emit('dropdownOpen');
   });
+}
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      projectsDropdownApp,
-    },
-    data() {
-      const dataset = this.$options.el.dataset;
-      const store = new ProjectsStore();
-      const service = new ProjectsService(dataset.userName);
+$(navEl).on('show.bs.dropdown', () => {
+  dropdownOpened();
+});
 
-      const project = {
-        id: Number(dataset.projectId),
-        name: dataset.projectName,
-        namespace: dataset.projectNamespace,
-        webUrl: dataset.projectWebUrl,
-        avatarUrl: dataset.projectAvatarUrl || null,
-        lastAccessedOn: Date.now(),
-      };
+// eslint-disable-next-line no-new
+new Vue({
+  el,
+  components: {
+    projectsDropdownApp,
+  },
+  data() {
+    const dataset = this.$options.el ? this.$options.el.dataset : {};
+    const store = new ProjectsStore();
+    const service = new ProjectsService(dataset.userName);
 
-      return {
-        store,
-        service,
-        state: store.state,
-        currentUserName: dataset.userName,
-        currentProject: project,
-      };
-    },
-    render(createElement) {
-      return createElement('projects-dropdown-app', {
-        props: {
-          currentUserName: this.currentUserName,
-          currentProject: this.currentProject,
-          store: this.store,
-          service: this.service,
-        },
-      });
-    },
-  });
+    const project = {
+      id: Number(dataset.projectId),
+      name: dataset.projectName,
+      namespace: dataset.projectNamespace,
+      webUrl: dataset.projectWebUrl,
+      avatarUrl: dataset.projectAvatarUrl || null,
+      lastAccessedOn: Date.now(),
+    };
+
+    return {
+      store,
+      service,
+      state: store.state,
+      currentUserName: dataset.userName,
+      currentProject: project,
+    };
+  },
+  render(createElement) {
+    return createElement('projects-dropdown-app', {
+      props: {
+        currentUserName: this.currentUserName,
+        currentProject: this.currentProject,
+        store: this.store,
+        service: this.service,
+      },
+    });
+  },
 });
+
+export default dropdownOpened;
diff --git a/app/assets/javascripts/projects_dropdown_loader.js b/app/assets/javascripts/projects_dropdown_loader.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c2786f65319f5f4a6adc73b6ece2fb01787240b
--- /dev/null
+++ b/app/assets/javascripts/projects_dropdown_loader.js
@@ -0,0 +1,14 @@
+export default function conditionallyLoadProjectDropdown() {
+  const el = document.getElementById('js-projects-dropdown');
+  const navEl = document.getElementById('nav-projects-dropdown');
+  if (!el || !navEl) {
+    return;
+  }
+  $(navEl).one('show.bs.dropdown', (e) => {
+    import(/* webpackChunkName: 'projects_dropdown' */ './projects_dropdown')
+    .then((importedFunc) => {
+      importedFunc.default(e);
+    })
+    .catch(() => {});
+  });
+}