Closed techgems closed 3 years ago
The culprit should be tailwindcss, which takes about 1 minute (on my machine) for postcss to handle it, you can try it by yourself:
npm i -D postcss-cli postcss
npx postcss src/app.postcss -o dist/compiled.css
Even through the tailwindcss's cli, it takes 7 seconds:
npx tailwindcss -i src/app.postcss -o dist/compiled.css
The svelte compiler takes about 0.5 second per file, which is somewhat acceptable.
There's no good solution for it since tailwindcss is such big thing. Maybe you should try twin.macro or not use tailwindcss. Or, pre-compile this file to some place, and import from that pre-compiled file, so that postcss won't be used on it.
Thanks! I think I am fine with pre-compiling and compiling it manually myself if that will solve the awfully long wait time.
You seem to be using tailwind 2+ so I strongly recommend enabling tailwind JIT mode. Rather than take a massive precompiled CSS file and purge it, it will build up your CSS file based on the classes it finds. As a result it starts virtually instantly.
tailwind.config.js
module.exports = {
mode: 'jit', // <--- enable JIT
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // you still need purge paths so it knows where to find classes
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Below, note that Vite starts in less than 300ms with Tailwind 2 while using JIT mode. Yes, it raises a warning, but that will go away after a few more releases.
Today I actually spent some time trying to troubleshoot this. JIT solved the slowness problem, but it destroyed the styles for some reason unknown to me. After some googling I eventually came to the conclusion to try Windi CSS instead and test them on their claim of being 20x faster on Vite.
I don't have numbers, but the load time was very fast and none of the styling of my beautiful template broke down, so I think I'll stick with Windi CSS for the time being, at least unless there's a big reason in the future that requires me to switch back to Tailwind.
I'm going to upload the latest changes into the repo I used for this issue and link it here, hopefully this helps someone else with issues similar to mine. Thanks!
As mentioned, I will be closing the issue now. Thanks for the help and if anyone is interested in a functional version of Notus Svelte + TS + Vite without all the hassle, here's the repo:
https://github.com/techgems/notus-svelte-vite-ts
Once again thanks for the help.
@techgems Most likely tailwind's css reset (called Preflight) broke the styles if the template you were using wasn't originally built for tailwind classes.
For posterity, you can disable preflight in your tailwind config.
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
I've done this before in a recent project that had existing styles. It works, but requires extra classes you wouldn't normally need to wrangle the styles.
Describe the bug
So my main goal has been to move this project https://github.com/creativetimofficial/notus-svelte?ref=ns-index-navbar to use Vite instead of Rollup. I managed to successfully move it and make it work. But it takes forever to load.
The actual bundling is ready really fast it seems
It is the page actually loading and the hot reloading of the application that take a very long time with a browser with a blank page.
The rollup version from the original repo loads nearly instantly.
This happens on Windows 10. This is my first issues in this repo, if there is anything wrong or that needs correcting or a detail missing, please let me know.
Reproduction
Download the following repository: https://github.com/techgems/notus-vite-perf
Then run
The dev server starts very fast, it's the loading of the site on a browser that takes ages.
System Info
Used Package Manager
npm
Logs