Import and bundle size issue with our current folder structure

[Chanlito]

With our current structure if I import like the following:

import { VCard, VCardText, VTextField } from 'vuetify-tsx';

Will result importing all components which will increase the application bundle size significantly.

A Possible Solution

Import components the following way:

import VCard from 'vuetify-tsx/components/cards/VCard';
import VCardText from 'vuetify-tsx/components/cards/VCardText';
import VTextField from 'vuetify-tsx/components/inputs/VTextField';

This way will use only these 3 components.
The issue here is nobody likes to import like this.

A Better Solution
Restructure our components like the following (without inputs, cards ... folders) just flat:

• src
  • components
    • VCard.tsx
    • VCardText.tsx
    • VTextField.tsx
    • ...

This way we can use it like the following:

import VCard from 'vuetify-tsx/components/VCard';
import VCardText from 'vuetify-tsx/components/VCardText';
import VTextField from 'vuetify-tsx/components/VTextField';

We can go even further to add babel-plugin-import

{
  plugins: [
    [
      'import',
      {
        libraryName: 'vuetify-tsx',
        libraryDirectory: 'components',
        camel2DashComponentName: false,
      },
    ],
  ],
}

This way when we just import the components like this:

import { VCard, VCardText, VTextField } from 'vuetify-tsx';

[Shinigami]

Interesting, I'm not so deep in tree shaking and why this happens.

What does libraryDirectory: 'components' do?

I'm definitely with you that nobody likes default import like this.
So maybe we should consider remove every export >default<?

If there is a solution that allows us to use subfolders in components, I would like that much more because otherwise it is very unorganized.

[Shinigami]

Or can it help that we only fill ./src/index.ts with specific exports instead of export * from './components';

I think we will then provide this file like as in the previous version https://github.com/chanlito/vuetify-tsx/blob/21ea239425bf577ef4e37827b9f157354b708863/src/index.ts

[Chanlito]

Here is how Material UI does it.

[Shinigami]

I will try it in few hours.
Can you tell/explain me how I can analyze the bundle size?

[Chanlito]

You can change analyzerMode in vue.config.js and run the build command.