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

4
platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue
View file

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

6
platypush/backend/http/webapp/src/views/Dashboard.vue
View file

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

4
platypush/backend/http/webapp/src/views/Panel.vue
View file

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

6
platypush/backend/http/webapp/src/views/Plugin.vue
View file

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