Bundle size Vue3 30MB webpack-cli 4.9.1 vue-cli 5.0.1 - unsure how to fix

[Maximus1000]

Incredibly useful package. Thanks so much for your work on this. I have the same issue as a few others in terms of bundle size. I'm not using Vite, and simply can't figure out how to get tree-shaking / exclude to work in a standard Vue3 / vue-cli setup. In my larger project using webpack-cli 4.9.1 nad vue-cli 5.0.1, I started noticing slow load times and confirmed that it's on account of a 30mb icon file. I then created a fresh project as listed below to confirm that tree-shaking is no longer working in current default vue3 builds via vue-cli.

  "dependencies": {
    "core-js": "^3.8.3",
    "oh-vue-icons": "^1.0.0-rc3",
    "vue": "^3.2.13"
  },
    "@vue/cli-service": "~5.0.0",

In a fresh project built with vue-cli and nothing else in it, when I import like the following, I get a 31MB js file.

import { createApp } from 'vue'
import App from './App.vue'
require('./main.css')

import { OhVueIcon, addIcons} from "oh-vue-icons";
import { AiSemanticScholarSquare  } from "oh-vue-icons/icons";
addIcons(AiSemanticScholarSquare);

const app = createApp(App)
app.component("v-icon", OhVueIcon);
app.mount('#app')

However, if I import like this, I get a 789kb vendors file. //main.js or any component

import { OhVueIcon, addIcons} from "oh-vue-icons";
import { AiSemanticScholarSquare  } from "oh-vue-icons/icons/ai";
addIcons(AiSemanticScholarSquare);

I'm not sure what if any options Vue3 allows for exclude like the other poster described and solved using Vite. I do appreciate your work on this package, saves a lot of time on my end, and it's quite something to be able to instantly search 30k+ icons at once.

For now, in my larger projects, I'll simply dive down into the child dir of the relevant icon set. Also, this issue presented itself to me in the past week or less, unsure exactly; so, this may be related to some change in how Vue3 and/or Webpack is building.

Also, baseline chunk_vendors size with only the following devDep is 514kb. In this test, I'm not importing oh-vue-icons in main.js. Meaning that the single icon import of AiSemanticScholarSquare above is costing about 280kb, which likely means to me that vue is importing all content in the /ai folder, e.g. tree-shaking is not working when a single icon is being imported.

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "tailwindcss": "^3.1.4"
  },

Thanks in advance for your efforts. -Marcus

[alemangui]

@Maximus1000 having the same issue here, did you manage to solve it?

[Dino-Kupinic]

same issue. bump

[Dino-Kupinic]

This only seems to happen in Dev Server. In production this issue doesnt occur

[alemangui]

Happens in prod for us as well

On Wed, Jan 3, 2024, 10:11 Dino Kupinic @.***> wrote:

This only seems to happen in Dev Server. In production this issue doesnt occur

— Reply to this email directly, view it on GitHub https://github.com/Renovamen/oh-vue-icons/issues/24#issuecomment-1875615713, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJLJSLBDGMUIVOSL6WCCCTYMV7JZAVCNFSM52NEJMFKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBXGU3DCNJXGEZQ . You are receiving this because you commented.Message ID: @.***>

[Dino-Kupinic]

Happens in prod for us as well … On Wed, Jan 3, 2024, 10:11 Dino Kupinic @.> wrote: This only seems to happen in Dev Server. In production this issue doesnt occur — Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe <github.com/notifications/unsubscribe-auth/AAJLJSLBDGMUIVOSL6WCCCTYMV7JZAVCNFSM52NEJMFKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBXGU3DCNJXGEZQ> . You are receiving this because you commented.Message ID: @.>

Hmm... What do you use?

I used vite build and vite preview to test for production

[alemangui]

@Dino-Kupinic We are on webpack, weird it happens on both

[bostin]

webpack same issue. bump

[racinette]

Tree shaking is not working when npm run deving. I refactored a bunch of code from this:

import {
    HiLocationMarker,
    BiBriefcase,
    OiX,
    BiCheckLg,
    FaComments,
    MdViewcarouselRound,
    MdAccountcircleRound,
    RiHeartFill
} from "oh-vue-icons/icons";

To this:

import { HiLocationMarker } from 'oh-vue-icons/icons/hi';
import { BiBriefcase, BiCheckLg } from 'oh-vue-icons/icons/bi';
import { OiX } from 'oh-vue-icons/icons/oi';
import { FaComments } from 'oh-vue-icons/icons/fa';
import { MdViewcarouselRound, MdAccountcircleRound } from 'oh-vue-icons/icons/md';
import { RiHeartFill } from 'oh-vue-icons/icons/ri';

So that there are fewer dependencies. Now it loads only the specified oh-vue-icons/icons/* files. It made a 10x improvement in loading time over the original, which is enough in my case. Still, I couldn't find a more performant way. I don't think there is for now.