Vuetify treeshaking 不适用于 webpack

Question

我不明白为什么 vuetify treeshaking 在我的应用程序上不起作用，因为我遵循了描述的每个步骤 here。我错过了什么吗？

我没有使用 vue CLI，而是使用带有 vuetify 加载程序的 webpack 5。

这是interactive treemap visualization from the Webpack bundle analyzer plugin

我正在使用：

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

这是我的代码。

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（开发和生产的通用配置）

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'`];
        }
      }
    })
  ]
}

Answer 1

我可能已经找到了负责这个的 webpack 配置。但我不知道它为什么会这样做。有什么想法吗？

在webpack.prod.js中：

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

Vuetify treeshaking 不适用于 webpack

Vuetify treeshaking not working with webpack

webpack

vue.js

tree-shaking

vuetify.js

vuetify-loader