vue.js - 如何使用 vuetify 进行树摇动？

Question

我有 vue 应用程序和 vuetify。

要在 vuetify 中进行树摇动，我需要以这种方式导入:import Vuetify from 'vuetify/lib'; according to the docs .

在我的 vuetify 应用程序中，我没有 v-dialog。

当我使用 import Vuetify from 'vuetify' 编译我的应用程序代码时，我可以在 dist js 包中看到 - 其中有我不使用的 vuetify 代码(例如 v-对话框，v-dialog--animated)。

当我使用 import Vuetify from 'vuetify/lib'; 进行编译时，我没有看到未使用的代码(我没有看到 v-dialog)。

但缺点是我必须声明我想要使用的每个组件。

有没有一种简单的方法来进行树摇动？例如，我希望 vue 在 vuetify 包中搜索未使用的代码并将其删除。

Answer 1

如果您从 vuetify/lib 导入 vuetify 并使用 VuetifyLoaderPlugin 它应该可以工作。

正如文档建议你可以使用插件文件来设置 vuetify，所以

// plugins/vuetify.js
import Vuetify from 'vuetify/lib'
import Vue from 'vue'
Vue.use(Vuetify)

export default new Vuetify({/*optional options here*/})

以及您应用程序的入口文件

// main.js
import Vue from 'vue'
import vuetify from './plugins/vuetify'

new Vue({
  vuetify
)}.$mount('#app')

然后你需要确保你正在使用VuetifyLoader。这是 webpack 的示例配置

// webpack.config.js

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

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ],
}

source