diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index edfc9088d9aa1ac775c937e8308f4fdcaeed674e..fe59bcbd477b87d2686c18224188a5a11ca52ff0 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -12,7 +12,6 @@ import notificationsDropdown from './notifications_dropdown';
 import groupAvatar from './group_avatar';
 import GroupLabelSubscription from './group_label_subscription';
 import LineHighlighter from './line_highlighter';
-import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
 import groupsSelect from './groups_select';
 import Search from './search';
@@ -506,12 +505,16 @@ import Activities from './activities';
             .catch(() => {});
           break;
         case 'projects:artifacts:browse':
-          new ShortcutsNavigation();
-          new BuildArtifacts();
+          import('./pages/projects/artifacts/browse')
+          .then(callDefault)
+          .catch(fail);
+          shortcut_handler = true;
           break;
         case 'projects:artifacts:file':
-          new ShortcutsNavigation();
-          new BlobViewer();
+          import('./pages/projects/artifacts/file')
+          .then(callDefault)
+          .catch(fail);
+          shortcut_handler = true;
           break;
         case 'help:index':
           VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
diff --git a/app/assets/javascripts/pages/projects/artifacts/browse/index.js b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..024560710868a5b1cb3ce83b27aaf1646eae2bb5
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
@@ -0,0 +1,7 @@
+import BuildArtifacts from '~/build_artifacts';
+import ShortcutsNavigation from '~/shortcuts_navigation';
+
+export default function () {
+  new ShortcutsNavigation(); // eslint-disable-line no-new
+  new BuildArtifacts(); // eslint-disable-line no-new
+}
diff --git a/app/assets/javascripts/pages/projects/artifacts/file/index.js b/app/assets/javascripts/pages/projects/artifacts/file/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4cd67ac76e3b563a440b0732ae4e476e048351b8
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/artifacts/file/index.js
@@ -0,0 +1,7 @@
+import BlobViewer from '~/blob/viewer/index';
+import ShortcutsNavigation from '~/shortcuts_navigation';
+
+export default function () {
+  new ShortcutsNavigation(); // eslint-disable-line no-new
+  new BlobViewer(); // eslint-disable-line no-new
+}