admin管理员组

文章数量:1201640

So I have a component, which needs to be shown on the last page of the book, sometimes it isn't showing, for couple of seconds, sometimes you need to list back on the previous page and back on the last page for it to be shown. Also when I try throttling (slow internet) it doesn't show immediatelly

I don't know how to fix this

So I have a component, which needs to be shown on the last page of the book, sometimes it isn't showing, for couple of seconds, sometimes you need to list back on the previous page and back on the last page for it to be shown. Also when I try throttling (slow internet) it doesn't show immediatelly

I don't know how to fix this

Share Improve this question asked Jan 22 at 10:29 Elene GadeliaElene Gadelia 1 5
  • 1 No magic science here, reduce the amount of JS or get a faster connection. Could also use some UX tricks like loaders/skeletons etc to inform your user of what's happening. – kissu Commented Jan 22 at 10:30
  • 1 Also, this is specific to how the bundled app is structured and your bundler. It needs to be chunked wisely, and appropriate chunks need to be loaded when necessary. If it's known that a chunk is needed later on this page, it needs to be loaded in non-blocking way in spare time, potentially through async component – Estus Flask Commented Jan 22 at 10:42
  • Sometimes having to go back and forth to see the component implies that this is not about loading the component, unless you connection drops packages altogether, the component should show up eventually. My guess is that there is some sort of race condition inside the component that breaks it. Are you loading data during setup that gets accessed during mount? Or is detection of "last page" not working? What does the console say? Please provide more information. – Moritz Ringler Commented Jan 22 at 11:12
  • @MoritzRingler if the connection is really slow, requesting it again makes it faster usually. Not sure why but I guess that the browser is caching some already-loaded resources and giving higher priority to the non-yet-loaded ones. Again, never checked the technical details but real-life experience with poor Internet speeds taught me that one (times before 4/5G was widespread). – kissu Commented Jan 22 at 11:20
  • @kissu You are right, I shouldn't have phrased it so definitely, bad connections can cause all sorts of stuff (my current wlan is sensitive to interference - it's a nightmare, constant terror). I just wonder if we aren't being led down the wrong path. Elena, how do you know it's a connection issue? – Moritz Ringler Commented Jan 22 at 14:25
Add a comment  | 

2 Answers 2

Reset to default 0

When dealing with components of important dimensions the best practice is to try and implement lazy loading techniques or, as Estus Flask pointed out, using AsyncComponents.

Using the following portion of code allows you to load a component as soon as possible so rendering time is not directly affected by the internet connection.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

Of course it might still happen the internet connection is so poor that the user will experience excessive loading time.
More infos at https://vuejs.org/guide/components/async.

To improve the user experience ui/ux best practices suggest also to use spinners or skeletons (https://learnvue.co/articles/vue-skeleton-loading), as kissu pointed out in his comment.

1. Add loading state:

<template>
  <div>
    <loading-spinner v-if="isLoading"/>
    <your-component v-else v-cloak/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    this.isLoading = false;
  }
}
</script>

2. Consider using async components:

const AsyncComponent = () => ({
  component: import('./YourComponent.vue'),
  loading: LoadingComponent,
  delay: 200
})

本文标签: Vuejs component doesn39t render on slow internetStack Overflow