perf: load codemirror into a chunk for faster LCP (#641)

mainsail-crew · Feb 15, 2022 · 6563b7c · 6563b7c
1 parent 844ddc2
commit 6563b7c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
@@ -53,12 +53,13 @@
                 </template>
                 <v-card-text class="pa-0">
                     <overlay-scrollbars style="height: calc(var(--app-height) - 48px)" :options="{}">
-                        <codemirror
+                        <codemirror-async
+                            v-if="show"
                             ref="editor"
                             v-model="sourcecode"
                             :name="filename"
                             v-bind:file-extension="fileExtension"
-                        ></codemirror>
+                        ></codemirror-async>
                     </overlay-scrollbars>
                 </v-card-text>
             </panel>
@@ -129,11 +130,11 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { formatFilesize } from '@/plugins/helpers'
-import Codemirror from '@/components/inputs/Codemirror.vue'
 import Panel from '@/components/ui/Panel.vue'
+import CodemirrorAsync from '@/components/inputs/CodemirrorAsync'
 
 @Component({
-    components: { Panel, Codemirror },
+    components: { Panel, CodemirrorAsync },
 })
 export default class TheEditor extends Mixins(BaseMixin) {
     private dialogConfirmChange = false

diff --git a/src/components/inputs/CodemirrorAsync.ts b/src/components/inputs/CodemirrorAsync.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+/**
+ * Load code mirror into a chunk
+ */
+export default Vue.component(
+    'codemirror-async',
+    // A dynamic import returns a Promise.
+    () => import('@/components/inputs/Codemirror.vue')
+)