Vuetify：导入“vuetify/lib/framework”与“vuetify/lib”之间的区别

如何解决Vuetify：导入“vuetify/lib/framework”与“vuetify/lib”之间的区别

Vuetify 的以下导入有何区别：

方法一：

import Vuetify from 'vuetify/lib/framework';

方法B：

import Vuetify from 'vuetify/lib';

使用方法 A，Vuetify 包的大小为 1.12MB（开发）：

使用方法 B，它的大小为 1.79MB（开发）：

对于生产，包大小是相同的。

我的猜测是，使用方法 A Vuetify 已经在开发运行中进行摇树，而对于方法 B，摇树仅出现在生产构建中。

解决方法

您可以在 node_modules 文件夹中自行检查（如果您使用 npm）。

• vuetify/lib/framework 导出一个 Vuetify 类，它是处理所有 vuetify 魔法的框架。

• vuetify/lib 导出相同的 Vuetify 类，但也将所有组件、指令和预定义颜色作为命名导出导出，以便于访问，从而导致开发中的包更大。

正如您在自己的结果中看到的那样，由于 treeshaking，这对于生产来说真的无关紧要。但是，如果您要自定义安装，那么从 vuetify/lib 为 Vuetify 和所有其他相关组件执行一次导入比为颜色、组件和指令单独导入和路径更容易。