I am testing a simple login page made using coreui css library.
I noticed nextjs development mode really slow compared to production.
I file size shown in network tab shows 9mb of login.js payload.
I loads faster in production tho.
#nextjs development mode really slow compared to production
shy pebble
even the module size is increased
my nextjs config file rn looks like
polar warren
dev mode being slower than prod mode is to be expected
prod mode is much much more optimised than dev mode
shy pebble
I found the cause being @coreui/icons module
It's inserting unused icons in development
Any way I can remove unwanted icons?
I also switch to nextjs 13 to check if it'll fix the issue but same issue
Someone told about modularized imports but I can't get it working for coreui icons
polar warren
i dont use coreui so idk, but search for keywords like tree shaking in their documentation
shy pebble
how do to treeshake this? ```
import { cib500px5 } from './brand/cib-500px-5.js'
import { cib500px } from './brand/cib-500px.js'
import { cibAboutMe } from './brand/cib-about-me.js'
import { cibAbstract } from './brand/cib-abstract.js'
import { cibAcm } from './brand/cib-acm.js'
import { cibAddthis } from './brand/cib-addthis.js'
import { cibAdguard } from './brand/cib-adguard.js'
import { cibAdobeAcrobatReader } from './brand/cib-adobe-acrobat-reader.js'
import { cibAdobeAfterEffects } from './brand/cib-adobe-after-effects.js'
import { cibAdobeAudition } from './brand/cib-adobe-audition.js'
import { cibAdobeCreativeCloud } from './brand/cib-adobe-creative-cloud.js'
import { cibAdobeDreamweaver } from './brand/cib-adobe-dreamweaver.js'
import { cibAdobeIllustrator } from './brand/cib-adobe-illustrator.js'
import { cibAdobeIndesign } from './brand/cib-adobe-indesign.js'
import { cilAppsSettings } from './free/cil-apps-settings.js'
import { cilApps } from './free/cil-apps.js'
import { cilArrowBottom } from './free/cil-arrow-bottom.js'
import { cilArrowCircleBottom } from './free/cil-arrow-circle-bottom.js'
import { cilArrowCircleLeft } from './free/cil-arrow-circle-left.js'
import { cilArrowCircleRight } from './free/cil-arrow-circle-right.js'
import { cilArrowCircleTop } from './free/cil-arrow-circle-top.js'
import { cilArrowLeft } from './free/cil-arrow-left.js'
import { cilArrowRight } from './free/cil-arrow-right.js'
import { cilArrowThickBottom } from './free/cil-arrow-thick-bottom.js'
import { cilArrowThickFromBottom } from './free/cil-arrow-thick-from-bottom.js'
import { cilArrowThickFromLeft } from './free/cil-arrow-thick-from-left.js'
import { cilArrowThickFromRight } from './free/cil-arrow-thick-from-right.js'
import { cilArrowThickFromTop } from './free/cil-arrow-thick-from-top.js'
import { cilArrowThickLeft } from './free/cil-arrow-thick-left.js'```
i cant decide how to modularizeImports: for this
it check 3 folders and the text has hypens on it
