我無法弄清楚為什么 vuetify treeshaking 無法在我的應用程式上運行，因為我遵循了此處描述的每個步驟。我錯過了什么嗎？
我沒有使用 vue CLI，而是使用帶有 vuetify 加載器的 webpack 5。
這是來自 Webpack 捆綁分析器插件的互動式樹形圖可視化
我正在使用 ：
"vue": "^2.6.14",
"vuetify": "^2.5.10",
"vuetify-loader": "^1.7.3",
"webpack": "^5.61.0",
這是我的代碼。
插件/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'`];
}
}
})
]
}
uj5u.com熱心網友回復：
我可能已經找到負責這個的 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',
}
}
},
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416555.html
標籤：