windicss / vite-plugin-windicss

🍃 Windi CSS for Vite ⚡️
MIT License
853 stars 65 forks source link

Loading a config file is slow #284

Open ArnaudBarre opened 2 years ago

ArnaudBarre commented 2 years ago

When adding this plugin, vite startup time goes from ~400ms to ~550ms without config file to ~700ms with config file.

I don't know what causes the first slow down, but for the second one it seems to be how the config is compiled. And caching doesn't seems to help a lot on restart. I think this plugin could use esbuild to bundle the config instead of jiti. I can try a PR if you want.

Screenshot 2022-02-23 at 20 23 04
jinzhubaofu commented 1 year ago

@ArnaudBarre I got this problem too. I figured out a solution which maybe can help you.

TLDR: you should keep windi.config.ts as easy as possible. Put your configurations which depends on 3rd party npm package in your vite.config.ts.

import {defineConfig} from 'vite';
import windicss from 'vite-plugin-windicss';

export default defineConfig({
  // ...
  plugins: [
    windicss({
      async onConfigResolved(config) {
         // override the windicss config, eg: extract, etc.
        return merge({}, config, {extract: {extractros: []}});
      }
    })
  ]
});

Here is why:

  1. vite-plugin-windicss will load your windi.config.ts using jiti.
  2. jiti will transform all the depedencies of windi.config.ts with babel, to compile ts into js and make sure it's cjs format.

So, jiti will cost a lot time.

jinzhubaofu commented 1 year ago

Maybe jiti is not a good option for vite-plugin-windicss: jiti runs in cjs mode, and uses require and cjs-format npm package first. But this conflicts with vite. jiti will throw error if a npm package doesn't provide a cjs-format export. Though, we can set env variable JITI_ESM_RESOLVE to get over the error, but this cost too much efforts to debug.

And jiti's transpile cache is disabled in @windicss/config for now. Maybe we should enable it?