#Improving prod build times for a component library

8 messages · Page 1 of 1 (latest)

heavy lodge
#

I have a component library with 40 or so components in a monorepo using Vue3, Options API, TS building with vite. The issue is that it takes about a minute to build. It looks like the transform step is the bottle necks in vite-plugin-inspect but I don't have the experience to know where to begin in speeding it up.

  1. The only barrel is in the entry point file with exports each component. When components import another component they are explicit import paths and do not import from the barrel.
  2. The vite-plugin-inspect is showing large transforms on a few mixins. Sometimes the load-fallback, sometimes the vite:esbuild. The odd thing is that these mixins are small and do anything complex or particularly interesting. They dont import anything, just define some functions. Maybe there's a ts config issue?

Entry point index.ts:
export {A} from @/components/A
export {B} from @/components/B
// ... and so on

// tsconfig

{
    "compilerOptions": {
        "esModuleInterop": true,
        "noImplicitAny": false,
        "noImplicitReturns": false,
        "strictNullChecks": false,
        "noImplicitThis": true,
        "module": "es2015",
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "target": "es5",
        "baseUrl": ".",
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "preserve",
        "sourceMap": true,
        "composite": true,
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom"
        ]
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
         "node_modules"
    ],
}
#

The vite debug plugin-transform also shows a lot of time with the vite:css with scss

heavy lodge
#

Upgrading to the latest version of sass helped by 20 seconds. But the profiler still shows long times on these simple mixins

runic trail
#

hi there

#

would you be able to run

vite --debug transform

to see what that looks like?

heavy lodge
#

Thanks for the response. It looks like the main offenders are primarily the styles of some components (scss) and a few mixins that don't really do that much

runic trail
heavy lodge
#

Thanks for the tip. Looking at the sass files I see that there was some chaining use/forwards that weren't set up in the sanest way. The import tree forwarded the same sass modules in different places, etc. That saved a few seconds each.

I still see some very basic mixins adding quite a bit of time but I think were in a good place for the moment. Thanks again