Home

Hi All,
I am using nuxt.js for my latest spa project, the project is almost finished but I found an serious performance issue.

When have a bunch of dynamic components in the page, the first meaningful content shows up after all decencies are downloaded, this issue is very serious when clients has a slow internet connection.

index.vue

<template lang="pug">
  .container
    p first meaningful content
    components(:is="currentComp")
</template>

<script>
const components = {
  aComponent: () => import('~/components/a' /* webpackChunkName: 'components/aComponent' */),
  bComponent: () => import('~/components/b' /* webpackChunkName: 'components/bComponent' */),
  cComponent: () => import('~/components/c' /* webpackChunkName: 'components/cComponent' */)
}
export default {
  components,
  data () {
    return {
      currentComp: 'bComponent'
    }
  }
}
</script>

‘first meaningful content’ string shows up after default.09be… .js is ready.