vue bundle size + ~2MB

[productdevbook]

<script lang="ts" setup>
import { VisLine, VisScatter, VisXYContainer } from '@unovis/vue'

definePageMeta({
  middleware: ['protected'],
})

type Data = typeof data[number]
const data = [
  { revenue: 10400, subscription: 240 },
  { revenue: 14405, subscription: 300 },
  { revenue: 9400, subscription: 200 },
  { revenue: 8200, subscription: 278 },
  { revenue: 7000, subscription: 189 },
  { revenue: 9600, subscription: 239 },
  { revenue: 11244, subscription: 278 },
  { revenue: 26475, subscription: 189 },
]

const lineX = (d: Data, i: number) => i
const lineY = (d: Data) => d.revenue
</script>

<template>
  <div>
    <h1>Home</h1>
    <div class="w-[500px]">
      <VisXYContainer height="280px" :data="data">
        <VisLine :x="lineX" :y="lineY" :line-width="5" />
        <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="#fff" :stroke-width="2" color="white" />
      </VisXYContainer>
    </div>
  </div>
</template>

With simple use, it increases the site load incredibly. It also increases 50 MB RAM usage.

[rokotyan]

@productdevbook (cc @zernonia) Do you know if Nuxt supports tree-shaking? If so, all of the unused modules should be automatically removed from the bundle. That would be great to see a detailed bundle analysis, something like what Webpack Bundle Analyzer produces https://www.npmjs.com/package/webpack-bundle-analyzer.

You can also try importing individual components and see what happens, i.e.:

import { VisLine } from '@unovis/vue/components/line'
import { VisScatter } from '@unovis/vue/components/scatteer'
import { VisXYContainer } from '@unovis/vue/containers/xy'

[Finn-paulsen]

Response #1

[sadeghbarati]

https://stackblitz.com/edit/github-u97pfz

Chart.client.vue and <ClientOnly><Chart /></ClientOnly>

Chart.vue

@unovis/vue components should be a client component
for analyze build run npm run analyze

---

If you want to see unminified build output change nuxt.config.ts to:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    build: {
      minify: false
    }
  }
})

[Finn-paulsen]

Response #2

[zernonia]

I believe it has something to do with nitro bundling all the dependencies for @unovis/vue in order to serve from server-side.

As suggested by @sadeghbarati , you should wrap the component as ClientOnly. (This applies to other charting library).

And thanks to the stackblitz provided by @sadeghbarati , can confirmed Nuxt does tree-shake properly.
Here's the Client bundle stats.

@rokotyan we can close this issue as irrelevant. 😁

[sadeghbarati]

Now I like "use client" directive error more in Next.js 😄

[rokotyan]

Thanks @zernonia! I'm going to convert this issue to a discussion because others can find this information useful too.

[Finn-paulsen]

Response #1