Vue - v1.0.0
Bundle Sizes
@artisanpack-ui/vue uses category-based entry points so you only pay for the components you import. Each entry point is a separate ESM bundle that tree-shakes independently.
Per Entry Point
| Entry Point | Import Path | Raw | Gzipped | Components |
|---|---|---|---|---|
| Form | @artisanpack-ui/vue/form |
102.1 KB | 14.4 KB | 15 components |
| Layout | @artisanpack-ui/vue/layout |
58.9 KB | 10.8 KB | 11 components |
| Navigation | @artisanpack-ui/vue/navigation |
43.0 KB | 7.8 KB | 7 components |
| Display | @artisanpack-ui/vue/display |
51.2 KB | 9.0 KB | 9 components |
| Data | @artisanpack-ui/vue/data |
26.6 KB | 6.1 KB | 3 components |
| Feedback | @artisanpack-ui/vue/feedback |
22.3 KB | 4.3 KB | 6 components |
| Utility | @artisanpack-ui/vue/utility |
24.0 KB | 5.7 KB | 5 components |
| Composables | @artisanpack-ui/vue/composables |
3.8 KB | 1.6 KB | 2 composables |
| Full bundle | @artisanpack-ui/vue |
333.9 KB | 60.1 KB | 56 components + 2 composables |
Sizes measured from the dist/ output after npm run build (tsup with esbuild). Gzipped sizes use standard gzip compression. Vue and peer dependencies (apexcharts, vue3-apexcharts) are externalized and not included in these sizes.
Recommendations
-
Import by category instead of from the main entry point to minimize bundle size:
// Preferred — only loads form components (~14 KB gzipped) import { Button, Input, Select } from '@artisanpack-ui/vue/form'; // Avoid — loads all components (~60 KB gzipped) import { Button, Input, Select } from '@artisanpack-ui/vue'; -
Composables are lightweight at 1.6 KB gzipped — safe to import freely.
-
Data components include the Chart component which depends on
apexchartsandvue3-apexchartsas optional peer dependencies. If you don't use Chart, those dependencies won't be loaded.