From e9f18975d8b3408ec7a2aa563e524d3965a97120 Mon Sep 17 00:00:00 2001
From: Ngai Kam Wing <weijinrong@gmail.com>
Date: Thu, 25 Mar 2021 00:09:11 +0800
Subject: [PATCH] Reduced chunk vendor build size ( Parsed size from 3.48MB to
 1.19MB ) (#4645)

Split out wysiwyg and markdown code into a separate chunk.
---
 app/src/interfaces/types.ts                            | 6 +++---
 app/src/interfaces/wysiwyg/index.ts                    | 7 +++++--
 app/src/modules/docs/routes/static.vue                 | 6 ++++--
 app/src/utils/register-component/register-component.ts | 4 ++--
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/src/interfaces/types.ts b/app/src/interfaces/types.ts
index c9b579874d..668ac806ca 100644
--- a/app/src/interfaces/types.ts
+++ b/app/src/interfaces/types.ts
@@ -1,5 +1,5 @@
 import VueI18n from 'vue-i18n';
-import { Component } from 'vue';
+import { Component, AsyncComponent } from 'vue';
 import { Field, types, localTypes } from '@/types';
 
 export type InterfaceConfig = {
@@ -7,8 +7,8 @@ export type InterfaceConfig = {
 	icon: string;
 	name: string | VueI18n.TranslateResult;
 	description?: string | VueI18n.TranslateResult;
-	component: Component;
-	options: DeepPartial<Field>[] | Component;
+	component: Component | AsyncComponent;
+	options: DeepPartial<Field>[] | Component | AsyncComponent;
 	types: typeof types[number][];
 	groups?: readonly typeof localTypes[number][];
 	relational?: boolean;
diff --git a/app/src/interfaces/wysiwyg/index.ts b/app/src/interfaces/wysiwyg/index.ts
index 982549efdf..f63d0a249b 100644
--- a/app/src/interfaces/wysiwyg/index.ts
+++ b/app/src/interfaces/wysiwyg/index.ts
@@ -1,12 +1,15 @@
-import InterfaceWYSIWYG from './wysiwyg.vue';
+import { AsyncComponent } from 'vue';
 import { defineInterface } from '@/interfaces/define';
 
+const InterfaceWYSIWYG = () =>
+	import(/* webpackChunkName: 'interface-wysiwyg', webpackPrefetch: true */ './wysiwyg.vue');
+
 export default defineInterface(({ i18n }) => ({
 	id: 'wysiwyg',
 	name: i18n.t('interfaces.wysiwyg.wysiwyg'),
 	description: i18n.t('interfaces.wysiwyg.description'),
 	icon: 'format_quote',
-	component: InterfaceWYSIWYG,
+	component: InterfaceWYSIWYG as AsyncComponent,
 	types: ['text'],
 	options: [
 		{
diff --git a/app/src/modules/docs/routes/static.vue b/app/src/modules/docs/routes/static.vue
index 7e8f5f563e..8e5e93fb25 100644
--- a/app/src/modules/docs/routes/static.vue
+++ b/app/src/modules/docs/routes/static.vue
@@ -27,11 +27,13 @@
 </template>
 
 <script lang="ts">
+import { AsyncComponent } from 'vue';
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import DocsNavigation from '../components/navigation.vue';
-import Markdown from '../components/markdown.vue';
 import marked from 'marked';
 
+const Markdown = () => import(/* webpackChunkName: 'markdown', webpackPrefetch: true */ '../components/markdown.vue');
+
 async function getMarkdownForPath(path: string) {
 	const pathParts = path.split('/');
 
@@ -52,7 +54,7 @@ async function getMarkdownForPath(path: string) {
 
 export default defineComponent({
 	name: 'StaticDocs',
-	components: { DocsNavigation, Markdown },
+	components: { DocsNavigation, Markdown: Markdown as AsyncComponent },
 	async beforeRouteEnter(to, from, next) {
 		const md = await getMarkdownForPath(to.path);
 
diff --git a/app/src/utils/register-component/register-component.ts b/app/src/utils/register-component/register-component.ts
index 6d6863c46b..4e0910bef8 100644
--- a/app/src/utils/register-component/register-component.ts
+++ b/app/src/utils/register-component/register-component.ts
@@ -1,6 +1,6 @@
-import Vue, { Component } from 'vue';
+import Vue, { Component, AsyncComponent } from 'vue';
 
-function registerComponent(id: string, component: Component): void;
+function registerComponent(id: string, component: Component | AsyncComponent): void;
 function registerComponent(id: string, component: Parameters<typeof Vue.component>[1]): void;
 
 function registerComponent(id: string, component: any) {