时间戳

首页 > 解决方案 > 如何使用 vuetify 进行 treeshaking？

vue.js - 如何使用 vuetify 进行 treeshaking？

问题描述

我有 vuetify 的 vue 应用程序。

要在 vuetify 中进行 treeshaking，我需要以这种方式导入：import Vuetify from 'vuetify/lib'; 根据 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 包中搜索未使用的代码并将其删除。

标签： vue.jsvuetify.js

解决方案

如果您从 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()
  ],
}

资源

推荐阅读