时间戳

首页 > 解决方案 > 使用 nuxt 构建配置后，babel-import-plugin 似乎没有减少 ant-design-vue 的大小

vue.js - 使用 nuxt 构建配置后，babel-import-plugin 似乎没有减少 ant-design-vue 的大小

问题描述

根据 doc Docs建议使用模块化的 antd 以确保优化并减小应用程序大小。但是，我尝试在我的 nuxt 构建配置中使用确切的代码，但应用程序大小在构建前后保持不变yarn build

下面是我的 nuxt 构建配置和构建前后的屏幕截图

 build: {
    analyze: true, // Remove this mode before deployment
    babel: {
      plugins: [
        [
          "import",
          {
            libraryName: "ant-design-vue",
            libraryDirectory: "es",
            style: "css"
          },
        ]
      ]
    }
  }

这是添加 babel-import-plugin 之前和之后的构建 在此处输入图像描述

标签： vue.jsnuxt.jsantdant-design-vue

解决方案

我只是通过从 nuxt 配置中删除 ant-design 插件来解决这个问题并大幅减小大小。

最初我的插头看起来像这样

 plugins: [
    "@/plugins/antd-ui",
    { src: "@/plugins/vue-carousel", ssr: false }
    // "@/plugins/axios"
  ],

然后我删除了插件以获得类似的东西

 plugins: [
    { src: "@/plugins/vue-carousel", ssr: false }
    // "@/plugins/axios"
  ],

现在我有这个最小的尺寸在此处输入图像描述

推荐阅读