vue.js - 如何在我的 Vuetify 项目中正确导入只需要的 MDI/JS 图标？

Question

我只想从 MDI 图标导入我使用的图标，因为整个 MDI 图标包大约 300kb。例如，在我的构建应用程序上只有 3 个图标有 300kb 是没有意义的。

我关注了 Vuetify 的 docs实现它。

我尝试只为我的 Vuetify 项目导入必要的图标，但是当我运行 npm run build 时，它只会添加大小为 2.1MB 的整个包(太疯狂了)，而不是只添加使用过的图标。我猜 tree shaking 没有正常工作。

知道为什么 Vuetify 的文档教程无法正常工作吗？我怎样才能实现这种期望的行为？

我通过在服务器上运行构建来测试它，Webpack 分析器显示相同的结果。

Answer 1

tl:dr:查看您的 .env 文件并检查 NODE_ENV=production

使用 npm run build-prod 三摇不工作。

"build-prod": "vue-cli-service build --mode prod",

但是当我使用默认的 npm run build 时一切正常。

阅读Vue文档说:

Then NODE_ENV will determine the primary mode your app is running in - development, production or test - and consequently, what kind of webpack config will be created.

因此，查看我的 .env.prod 文件，我将我的文件命名为 NODE_ENV=prod。但这一个指示如何进行构建。因此，将其重命名为 production 即可。