Vuetify treeshaking not working with webpack

Question

I can't figure out why vuetify treeshaking isn't working on my app, since i followed every steps described here. Am I missing something ?

I'm not using vue CLI, but webpack 5 with vuetify loader.

Here is the interactive treemap visualization from the Webpack bundle analyzer plugin

I'm using :

"vue": "^2.6.14",
"vuetify": "^2.5.10",
"vuetify-loader": "^1.7.3",
"webpack": "^5.61.0",

Here is my code.

plugins/vuetify/index.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

const opts = {/*...*/};
Vue.use(Vuetify);

export default new Vuetify(opts);

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './plugins/router';
import store from './plugins/store';
import vuetify from './plugins/vuetify';
import 'regenerator-runtime/runtime.js';
Vue.use(VueRouter);
new Vue({
    el: '#app',
    router,
    store,
    vuetify,
    render (createElement) {
        return createElement('router-view');
    }
});

webpack.common.js (common config for dev and prod)

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin({
      match(originalTag,{ kebabTag, camelTag, path, component}) {
        if (kebabTag.startsWith('app-')) {
          return [camelTag, `import ${camelTag} from '@/components/global/${kebabTag.substring(4)}.vue'`];
        }
      }
    })
  ]
}

I am having the same issue after upgrading to the webpack5/vue-cli4. Will check the vuetifyloaderplugin source , see if helps. — zhangv, Mar 24 '22 at 17:42
I've been having issues too, I haven't been able to fix it but from what I see in the docs, treeshaking is only compatible with webpack4 (I'm already on webpack4 but I still have problems) — Mark, May 16 '22 at 17:06

score -1 · Accepted Answer · answered Jan 14 '22 at 14:01

-1

I might have found the webpack config responsible for this. But i have no idea why it does what it does. Any idea ?

In webpack.prod.js :

optimization: {
    splitChunks: { // Extract script from vendors in a separate file
        cacheGroups: {
            default: false,
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all',
            }
        }
    },
},

answered Jan 14 '22 at 14:01

David

11
4

This does not answer the question. If you have a different question, you can ask it by clicking `Ask Question`. You can also add a [bounty](https://stackoverflow.com/help/bounty) to draw more attention to this question once you have enough reputation. – Tyler2P Jan 14 '22 at 21:12

Vuetify treeshaking not working with webpack

1 Answers1