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,
This PR is a proposal to enable Vuetify treeshaking.
This simple tweak reduces the total size of the
distdirectory ofWegue starter appfrom 18.1MB to 14.5MB.Some technical difficulties are encountered with unit tests though once the
Vuetify loaderis installed. Please note that this issue also happens on a fresh app scaffolded withVue-CLI. The way they get around this when generating an app from scratch is to putvuetifyin thetranspileDependencieslist, which is currently empty inWegueby 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'insidevue.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.jsand replacing line 75 of the same file byJust tell me whether treeshaking would be of an interest and what you think about this,
Cheers Sébastien