MyHeavyComponent.vue

<script lang="ts" setup>
import { ref } from "vue";
import * as faker from "@faker-js/faker";
const count = ref(0);

function heavyProcessing() {
  console.time("heavyProcessing");
  let res = 0;
  for (let i = 0; i < 2 * 10e7; i++) {
    res += (Math.random() > 0.5 ? 1 : -1) * Math.random() * i;
  }

  console.timeEnd("heavyProcessing");

  return res;
}

const result = ref(heavyProcessing());
</script>

<template>
  <div
    style="
      border: 1px solid lightblue;
      border-radius: 4px;
      padding: 8px;
      margin-top: 8px;
    "
  >
    <div>MyHeavyComponent</div>
    <div>
      This component is lazily hydrated (hydrated when it's in the viewport)
    </div>
    <div>
      However, its JS bundle is fetched initially, which is not necessary
    </div>

    <div>
      We use faker to increase the JS bundle size related to this component
      {{ faker.fakerIT.animal.bird() }}
    </div>
    <div>{{ result }}</div>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
</template>