babel-import-plugin doesn't seem to reduce ant-design-vue size after use nuxt build config

579 views Asked by At

According to the doc Docs It was recommended to use the modularized antd in order to ensure optimization and reduce the app size. However, I tried using the exact code in my nuxt build config but the app size remains the same before and after build using yarn build

Below is my nuxt build config and the screenshot to the before and after build

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

Here is the build before and after adding the babel-import-plugin enter image description here

1

There are 1 answers

0
Joshtom On

i just got this fixed and reduced the size drastically to this by only removing the ant-design plugin from the nuxt config.

Initially my plug look something like this

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

Then I removed the plugin to have something like this

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

Now i have this minimal size enter image description here