Wrapped dynamic Vue components in shallowRef.

The performance of the page is heavily degraded by components loaded
dynamically via defineAsyncComponent that recursively carry behind the
whole Vue machinery.

By wrapping defineAsyncComponent calls in shallowRef we make sure that
we only wire the root level of the newly created dynamic component.
This commit is contained in:
Fabio Manganiello 2023-01-14 22:31:48 +01:00
parent fd2d83c80b
commit 2778357a9e
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 16 additions and 12 deletions

View file

@ -32,7 +32,7 @@
</template>
<script>
import { defineAsyncComponent } from 'vue'
import { defineAsyncComponent, shallowRef } from 'vue'
import EntityMixin from "./EntityMixin"
export default {
@ -96,8 +96,10 @@ export default {
}
)
this.component = defineAsyncComponent(
() => import(`@/components/panels/Entities/${type}`)
this.component = shallowRef(
defineAsyncComponent(
() => import(`@/components/panels/Entities/${type}`)
)
)
}
},

View file

@ -8,7 +8,7 @@
<script>
import Utils from "@/Utils";
import Loading from "@/components/Loading";
import {defineAsyncComponent} from "vue";
import { defineAsyncComponent, shallowRef } from "vue";
export default {
name: "Plugin",
@ -41,7 +41,7 @@ export default {
this.loading = true
try {
this.component = defineAsyncComponent(() => import(`@/components/panels/${this.componentName}/Index`))
this.component = shallowRef(defineAsyncComponent(() => import(`@/components/panels/${this.componentName}/Index`)))
this.$options.components[this.componentName] = this.component
this.config = (await this.request('config.get_plugins'))?.[this.pluginName] || {}
} finally {

View file

@ -13,7 +13,7 @@
</template>
<script>
import { defineAsyncComponent } from 'vue'
import { defineAsyncComponent, shallowRef } from 'vue'
import Utils from '@/Utils'
import Loading from "@/components/Loading";
import Row from "@/components/widgets/Row";
@ -67,8 +67,10 @@ export default {
style: row.attributes.style?.nodeValue,
class: row.attributes.class?.nodeValue,
widgets: [...row.children].map((el) => {
const component = defineAsyncComponent(
const component = shallowRef(
defineAsyncComponent(
() => import(`@/components/widgets/${el.nodeName}/Index`)
)
)
const style = el.attributes.style?.nodeValue

View file

@ -19,7 +19,7 @@
</template>
<script>
import {defineAsyncComponent} from "vue";
import { defineAsyncComponent, shallowRef } from "vue";
import Utils from '@/Utils'
import Loading from "@/components/Loading";
import Nav from "@/components/Nav";
@ -63,7 +63,7 @@ export default {
return
}
const component = defineAsyncComponent(async () => { return comp })
const component = shallowRef(defineAsyncComponent(async () => { return comp }))
self.$options.components[name] = component
self.components[name] = {
component: component,

View file

@ -8,7 +8,7 @@
</template>
<script>
import {defineAsyncComponent} from "vue";
import { defineAsyncComponent, shallowRef } from "vue";
import Utils from '@/Utils'
import Loading from "@/components/Loading";
import Nav from "@/components/Nav";
@ -56,8 +56,8 @@ export default {
return
}
this.component = defineAsyncComponent(async () => { return comp })
this.$options.components[name] = this.component
this.component = shallowRef(defineAsyncComponent(async () => { return comp }))
this.$options.components[componentName] = this.component
},
async initConfig() {