diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index c05cbdaffe3aec4a7a8d860f2b7774c461ec4a98..f758584856b02345451acd84fee448668da7619a 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -125,6 +125,7 @@ export default {
       isEmptyRepository: false,
       projectId: null,
       showBlame: this.$route?.query?.blame === '1',
+      loadAnyway: false,
     };
   },
   computed: {
@@ -152,7 +153,7 @@ export default {
     },
     isTooLarge() {
       const { tooLarge, renderError } = this.viewer || {};
-      return tooLarge || renderError === 'collapsed';
+      return !this.loadAnyway && (tooLarge || renderError === 'collapsed');
     },
     blobViewer() {
       const { fileType } = this.viewer;
@@ -225,6 +226,10 @@ export default {
         this.switchViewer(useSimpleViewer ? SIMPLE_BLOB_VIEWER : RICH_BLOB_VIEWER);
       },
     },
+    loadAnyway(newValue) {
+      if (!newValue) return;
+      this.initHighlightWorker(this.blobInfo, this.isUsingLfs);
+    },
   },
   methods: {
     onError() {
@@ -401,6 +406,7 @@ export default {
         :current-ref="currentRef"
         class="blob-viewer"
         @error="onError"
+        @load-anyway="loadAnyway = true"
       />
       <code-intelligence
         v-if="blobViewer || legacyViewerLoaded"
diff --git a/app/assets/javascripts/repository/components/blob_viewers/too_large_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/too_large_viewer.vue
index 14e3d292a8c01fc7ce39fd83755e8ab3cc92d448..cf76fee4a143709ec6997255a89fb447e8a4b9fa 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/too_large_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_viewers/too_large_viewer.vue
@@ -13,7 +13,10 @@ export default {
   i18n: {
     header: s__('BlobViewer|The file could not be displayed because it is too large.'),
     collapsedDescription: s__(
-      'BlobViewer|You can either %{rawLinkStart}view the raw file%{rawLinkEnd} or %{downloadLinkStart}download it%{downloadLinkEnd}.',
+      'BlobViewer|%{rawLinkStart}View the raw file%{rawLinkEnd} or %{downloadLinkStart}download it%{downloadLinkEnd}.',
+    ),
+    loadAnywayDescription: s__(
+      'BlobViewer|%{loadAnywayLinkStart}Loading the file anyway%{loadAnywayLinkEnd} may result in significant performance issues.',
     ),
     tooLargeDescription: s__('BlobViewer|You can %{linkStart}download it%{linkEnd}.'),
   },
@@ -45,6 +48,7 @@ export default {
       <template #rawLink="{ content }">
         <gl-link :href="filePath" rel="nofollow" target="_blank">{{ content }}</gl-link>
       </template>
+
       <template #downloadLink="{ content }">
         <gl-link :href="filePath" rel="nofollow" target="_blank" :download="fileName">{{
           content
@@ -59,5 +63,13 @@ export default {
         }}</gl-link>
       </template>
     </gl-sprintf>
+
+    <p>
+      <gl-sprintf :message="$options.i18n.loadAnywayDescription">
+        <template #loadAnywayLink="{ content }">
+          <gl-link data-testid="load-anyway" @click="$emit('load-anyway')">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 08f4474819c110279ba2f961242a066d48cb7b8d..e34c971e0e13a6c1a0f527c1c90ac3b667732110 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9552,6 +9552,12 @@ msgstr ""
 msgid "Blame for binary files is not supported."
 msgstr ""
 
+msgid "BlobViewer|%{loadAnywayLinkStart}Loading the file anyway%{loadAnywayLinkEnd} may result in significant performance issues."
+msgstr ""
+
+msgid "BlobViewer|%{rawLinkStart}View the raw file%{rawLinkEnd} or %{downloadLinkStart}download it%{downloadLinkEnd}."
+msgstr ""
+
 msgid "BlobViewer|If you delete the file, it will be removed from the branch %{branch}."
 msgstr ""
 
@@ -9570,9 +9576,6 @@ msgstr ""
 msgid "BlobViewer|You can %{linkStart}download it%{linkEnd}."
 msgstr ""
 
-msgid "BlobViewer|You can either %{rawLinkStart}view the raw file%{rawLinkEnd} or %{downloadLinkStart}download it%{downloadLinkEnd}."
-msgstr ""
-
 msgid "Block"
 msgstr ""
 
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 240603572d83017ef948d42739ab590dd58f6418..89e82a3a642a19ec41b7b0916a5c096adce57dea 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -654,4 +654,18 @@ describe('Blob content viewer component', () => {
       },
     );
   });
+
+  describe('loadAnyway', () => {
+    beforeEach(async () => {
+      loadViewer.mockReturnValue(TooLargeViewer);
+      await createComponent();
+    });
+
+    it('initializes highlight worker when load-anyway is emitted', () => {
+      wrapper.findComponent(TooLargeViewer).vm.$emit('load-anyway');
+      const { rawTextBlob: content, language, fileType } = simpleViewerMock;
+
+      expect(highlightWorker.postMessage).toHaveBeenCalledWith({ content, language, fileType });
+    });
+  });
 });
diff --git a/spec/frontend/repository/components/blob_viewers/too_large_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/too_large_viewer_spec.js
index efd41b50046b1ad3ad2df2ccfc81a9cb28921cea..d09f2f9b4656ae09afd81b279cab7ef9bb846267 100644
--- a/spec/frontend/repository/components/blob_viewers/too_large_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_viewers/too_large_viewer_spec.js
@@ -1,5 +1,5 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TooLargeViewer from '~/repository/components/blob_viewers/too_large_viewer.vue';
 
 describe('Too Large Viewer', () => {
@@ -20,7 +20,7 @@ describe('Too Large Viewer', () => {
   };
 
   const createComponent = (blobData = {}) => {
-    wrapper = shallowMount(TooLargeViewer, {
+    wrapper = shallowMountExtended(TooLargeViewer, {
       propsData: {
         blob: {
           ...DEFAULT_BLOB_DATA,
@@ -32,6 +32,7 @@ describe('Too Large Viewer', () => {
   };
 
   const findLinks = () => wrapper.findAllComponents(GlLink);
+  const findLoadAnywayLink = () => wrapper.findByTestId('load-anyway');
 
   describe('when file is too large', () => {
     beforeEach(() => createComponent());
@@ -40,11 +41,9 @@ describe('Too Large Viewer', () => {
       expect(wrapper.text()).toContain('The file could not be displayed because it is too large.');
     });
 
-    it('renders single download link with correct attributes', () => {
+    it('renders download link with correct attributes', () => {
       const links = findLinks();
 
-      expect(links).toHaveLength(1);
-
       expect(links.at(0).attributes()).toMatchObject({
         ...DEFAULT_LINK_ATTRIBUTES,
         download: DEFAULT_BLOB_DATA.name,
@@ -62,8 +61,6 @@ describe('Too Large Viewer', () => {
     it('renders two links for raw view and download', () => {
       const links = findLinks();
 
-      expect(links).toHaveLength(2);
-
       expect(links.at(0).attributes()).toMatchObject(DEFAULT_LINK_ATTRIBUTES);
 
       expect(links.at(1).attributes()).toMatchObject({
@@ -73,7 +70,13 @@ describe('Too Large Viewer', () => {
     });
 
     it('renders correct description text', () => {
-      expect(wrapper.text()).toContain('You can either view the raw file or download it.');
+      expect(wrapper.text()).toContain('View the raw file or download it.');
+    });
+
+    it('emits load-anyway event when load anyway link is clicked', () => {
+      findLoadAnywayLink().vm.$emit('click');
+
+      expect(wrapper.emitted('load-anyway')).toHaveLength(1);
     });
   });