blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Wrapped dynamic Vue components in shallowRef.

Browse source 
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: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
View file

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

4
platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue
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 {

6
platypush/backend/http/webapp/src/views/Dashboard.vue
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,9 +67,11 @@ 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
const classes = el.attributes.class?.nodeValue

4
platypush/backend/http/webapp/src/views/Panel.vue
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,

6
platypush/backend/http/webapp/src/views/Plugin.vue
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() {