vue bundle size + ~2MB
productdevbook opened this issue · comments
<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.
@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'
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
}
}
})
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. 😁
Now I like "use client" directive error more in Next.js 😄
Thanks @zernonia! I'm going to convert this issue to a discussion because others can find this information useful too.