如何使用 vuetify 进行 treeshaking？

Question

我有带有 vuetify 的 vue 应用程序。

要在 vuetify 中进行 treeshaking，我需要以这种方式导入：import Vuetify from 'vuetify/lib';according to the docs。

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

当我使用 import Vuetify from 'vuetify' 编译我的应用程序代码时，我可以在 dist js 包中看到我不使用的 vuetify 代码（例如 v-dialog、v-dialog--animated）。

当我使用import Vuetify from 'vuetify/lib'; 编译时，我看不到未使用的代码（我看不到v-dialog）。

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

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

Answer 1

您使用Vue CLI 吗？如果没有，我建议这样做。你只需要几个命令：

安装 Vue CLI

npm install -g @vue/cli

这将全局安装 Vue CLI（您可能需要管理员权限） 更多信息见：Installation|Vue CLI

创建你的应用程序

vue create my-app

这将为 Vue.js 设置您的项目并询问您一些问题。您可以使用默认设置。之后，您必须切换到项目目录。

cd my-app

安装 Vuetify

vue add vuetify

这将安装 Vuetify 框架。您可以使用默认设置。之后，您将使用 Vue.js + Vuetify 进行项目设置。此外，默认设置是在最后构建应用程序时使用 tree-shaking。

更多详情，我有an example here，最后还包括 Electron。但是配置 Vuetify 的步骤是相同的​​。使用此设置，您会自动进行摇树。

Answer 2

如果您从 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