Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable Vuetify treeshaking #364

Merged
merged 3 commits into from
Mar 6, 2024

Conversation

sronveaux
Copy link
Collaborator

@sronveaux sronveaux commented Dec 1, 2023

This PR is a proposal to enable Vuetify treeshaking.

This simple tweak reduces the total size of the dist directory of Wegue starter app from 18.1MB to 14.5MB.

Some technical difficulties are encountered with unit tests though once the Vuetify loader is installed. Please note that this issue also happens on a fresh app scaffolded with Vue-CLI. The way they get around this when generating an app from scratch is to put vuetify in the transpileDependencies list, which is currently empty in Wegue by default.
This transpile operation makes the bundle size to grow of 26.374 bytes with the starter app which is negligible, but also produces a warning: [BABEL] Note: The code generator has deoptimised the styling of C:\Sources\Wegue\node_modules\vuetify\dist\vuetify.js as it exceeds the max of 500KB.

The only other way around I've found is to disable treeshaking once NODE_ENV === 'test' inside vue.config.js. I haven't encountered problems in my personal applications with this yet but this should be tested on more apps I think...

So this PR implements the second solution (disabling treeshaking during unit tests) but in case you'd like to test the other option, all what should be done is commenting out line 65 in vue.config.js and replacing line 75 of the same file by

  transpileDependencies: ['vuetify']

Just tell me whether treeshaking would be of an interest and what you think about this,

Cheers
Sébastien

Copy link
Collaborator

@fschmenger fschmenger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @sronveaux,
I tested this in a larger application and it worked out fine.
I can also confirm your observations on Wegue default app bundle sizes.
For my custom app it`s roughly 18,6 MB with and 21,0 MB without treeshaking.

Nice work!
One question inline, otherwise approved and ready to merge.

src/main.js Show resolved Hide resolved
vue.config.js Show resolved Hide resolved
@fschmenger fschmenger merged commit ba60835 into wegue-oss:master Mar 6, 2024
1 check passed
@sronveaux sronveaux deleted the vuetify-treeshaking branch March 8, 2024 08:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants