WHy is it so slow?

[babakfp]

Is it because of lucide-svelte? I installed Button, DropdownMenu and the reload speed went from x/ms to a few seconds :|

[ibanks42]

I noticed this as well and I do believe it's from lucide-svelte, but if you build it and run the production build it loads in quick/just fine. It seems to just be a dev thing.

What I ended up doing is just uninstalling lucide-svelte and making my own components from the SVGs when/where I needed them. A bit annoying, but oh well. If you go that route though there are quite a few components that have dependencies from radix-icons-svelte that you will have to fix as well.

[huntabyte]

Yeah it's likely the optimization of the icons. It should cache so once you deal with the slowness at first it'll speed up

[babakfp]

I think this speed issue results in a bad developer experience.

We could remove the index file and import the icon components individually; and add a note in docs letting people know why this is done and also that they can create their own index file (only for the icons that they use).

This solution may be making DX bad by asking devs to do more work, however I think the speed issue is worse and it can result it a worse DX.

Note on removing the index file, I think it should be removed because users may use it without knowing the cons and think that something is wrong with the library...

I think this issue needs to be resolved even with the caching feature and considering that the issue doesn't exist in production.

---

UPDATE:

Maybe it's a good idea to take a look into how other frameworks are solving this issue.

[huntabyte]

Does the same issue also occur when using radix-icons-svelte or other svelte icon libraries? I'm curious if this is an issue that could be resolved on Lucide's end?

[babakfp]

This isn't specific to Lucide. They import thousands/hundreds of icons in an index file, and when you just want to import a single icon, you kinda load them all, because you import the index file.

[babakfp]

Rec.0020.mp4

NOTE: in the /import-all route, I imported a single icon like import { IconName } from "radix-icons-svelte".

[huntabyte]

See: lucide-icons/lucide#1284

Right now I can't even import the component directly from lucide, which is an issue. Definitely not creating a bunch of SVGs either. if they don't enable us to resolve, then we'll switch to something like this: https://github.com/shinokada/svelte-lucide which appears to have accomplished what the original has not.

[babakfp]

For the demo on the left side, I wrote a script that removed the import code for the unused icons from the index file (for both of the icon libraries).

Rec.0024.mp4

         FIRST LOAD    FULL LOAD
LEFT     16s           33s
RIGHT    26s           57s

[huntabyte]

Yes, but Lucide is the one that doesn't provide a way to directly import the component without svelte-check failing.

[hugotox]

I think they fixed this, I'm importing my icons like import Camera from 'lucide-svelte/icons/camera' and the svelte check passes just fine

[adaptive-shield-matrix]

Maybe use mdi icons instead?
https://pictogrammers.com/library/mdi/

[babakfp]

Can I create a library myself for lucide icons, and create a PR for replacing the libraries? I can do the same for melt-ui too since it suffers from the same issue too.

I made this library for another icon library for the same reasons:

• TypeScript support.
• Built with accessibility in mind.
• Improved performance and developer experience.

[huntabyte]

There's an active PR with lucide that will resolve this issue once it's merged lucide-icons/lucide#1707

[armchair-traveller]

You guys not using https://github.com/unplugin/unplugin-icons ?

[FranckPoingt]

Came here to ask what would be the required effort to replace lucid with something like Iconify or unplugin. It would be great to have the option of choosing the icon library of our choice

[huntabyte]

We're in the discussion about a potential plugin-based system that could be integrated with the CLI to make these swaps, they'd be community-driven and maintained though.

[FranckPoingt]

@huntabyte great to hear, is this discussion public somewhere?

[cannap]

can i not just uninstall lucide or is it used internally?

[huntabyte]

It's not used internally so you can uninstall it and replace it with whatever you'd like!

[chientrm]

Uhm, Maybe replace lucide-svelte with unplugin-icons 😗

[hugotox]

Hello!
FWIW I also thought the slowness issue was caused by icons, so as proof of concept I just removed all of them, and the slowness persisted but revealed another (similar) culprit: in dev mode, vite doesn't tree shake and it just transforms the whole library.

E.g on my page I'm just using the Button,
import is the standard:

import { Button } from "$lib/components/ui/button";

Which makes the import from bits ui like this:

import { Button as ButtonPrimitive } from 'bits-ui'

That instructs vite to process the whole 3.2Mb lib, as shown:

Worth noting this issue doesn't happen in production builds, where the imports are correctly tree-shaken.

@huntabyte any chance to allow direct imports from bits-ui? So we can do something like

import ButtonPrimitive from 'bits-ui/button'`

[RonB]

Hi,
I am a bit confused and am not able to solve the enormous processing time when refreshing a page. If for instance a simple dialog or menu component is on the page then the page load time when refreshing is some 8 seconds or more. If I remove the component then the page is really fast. I am not using any icons.
When debugging vite I see it takes a long time when loading the first page and the server starts processing the bits-ui and melt-ui files. That is not a problem but at every subsequent page refresh vite again takes a long time to load the entry.js file generated in the .pnpm/@sveltjs+kit....

Any help on this would be greatly appreciated.

[Masstronaut]

Have you also noticed they result in large bundles in prod? Not 3.2mb but not small.

[shyakadavis]

Hi;

I have not done any benchmarks, but I've been doing some reading on barrel files.

• https://dev.to/thepassle/a-practical-guide-against-barrel-files-for-library-authors-118c
• https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/
• e.t.c

Curious to know if this could also play a part in this?

[shawnlong636]

One of the solutions I came up with is using svelte-fa for FontAwesome Icons and after adding a component to my project for shadcn-svelte, I replace the lucide icon with the corresponding one from svelte-fa. Easy fix without needing to manually create a bunch of different icons

[shawnlong636]

@RonB, that's interesting how your bits-ui is so small. Out of curiosity, what components are you using?

I'm seeing 3.6mb for bits-ui in my project, and I'm using the following shadcn-svelte components:

• accordion
• avatar
• button
• dropdown-menu
• input
• select
• sheet
• sonner

[RonB]

It does not matter how many components I load, it is always 265kb.

[shawnlong636]

Do you happen to have a public repo that others can clone to see if we also show the same size for bits-ui? My hunch is that the reason you aren't experiencing the issue is because of the dev environment you setup or some configuration setting you have set up with vite.

I love dev containers in VS Code, but I don't love the idea of being locked into using it just because of a vite issue.

[RonB]

About the dev container, It is more the cause of the problem than the solution. The access from the container to the sourcecode on the host seems to be the bottleneck, therefore I moved the sourcecode to a ramdisk to avoid the physical access to the ssd. So you dont need a dev container at all, just make sure that file access to the source is fast. Than to you other request:

It is a private company repo so it would take some time to create a public one, but I don't do anything special:

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	server: {
		port: 3000,
		host: true
	},
	preview: {
		port: 4000
	},
	plugins: [
		sveltekit(),
	]
})

svelte.config.js

import adapter from "@sveltejs/adapter-cloudflare";
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		preprocess({
			postcss: true
		})
	],
	kit: {
		adapter: adapter(),
		csrf: {
			// handled in hooks.server.ts, because we can have multiple valid origins
			checkOrigin: false,
		},
		env: {
			dir: '.'
		},
		paths: {
			base: "",
		},
		alias: {
			$src: './src',
			$routes: './src/routes',
			$common: './src/common',
			$components: './src/lib/components',
			'$components/*': './src/lib/components/*',
		},
	},
};

export default config;

postcss.conig.js:

export default {
    plugins: {
        tailwindcss: {}
    }
};

tsconfig.json:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"lib": [
			"es5",
			"es6",
			"es7",
			"esnext",
			"dom"
		],
		"sourceMap": true,
		"importHelpers": true,
		"removeComments": false,
		"esModuleInterop": true,
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"strict": true,
		"noUncheckedIndexedAccess": true,
		"skipLibCheck": true,
		"strictPropertyInitialization": false,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"noFallthroughCasesInSwitch": true,
		"downlevelIteration": true,
		"isolatedModules": true,
		"types": []
	}
}

pacakge.json

{
  "name": "www",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check . && eslint .",
    "format": "prettier --write .",
    "pages:preview": "pnpm run build && wrangler pages dev --compatibility-date=2024-01-29 .svelte-kit/cloudflare",
    "pages:deploy": "pnpm run build && wrangler pages deploy .svelte-kit/cloudflare"
  },
  "devDependencies": {
    "@auth/core": "^0.28.2",
    "@auth/sveltekit": "^0.14.2",
    "@iconify/json": "^2.2.196",
    "@iconify/svelte": "^3.1.6",
    "@iconify/tools": "^4.0.2",
    "@playwright/test": "^1.42.1",
    "@prettier/sync": "0.3.0",
    "@sveltejs/adapter-cloudflare": "^4.4.0",
    "@sveltejs/kit": "^2.5.5",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@types/cookie": "^0.6.0",
    "@types/node": "^20.12.2",
    "@types/swagger-ui": "^3.52.4",
    "@types/uuid": "^9.0.8",
    "@types/ws": "^8.5.10",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
    "@zodios/core": "^10.9.6",
    "@zodios/openapi": "^10.5.0",
    "autoprefixer": "^10.4.19",
    "cookie": "^0.6.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.35.1",
    "mime": "^4.0.1",
    "mode-watcher": "^0.3.0",
    "paneforge": "^0.0.4",
    "postcss": "^8.4.38",
    "postcss-load-config": "^5.0.3",
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.8",
    "svelte-confetti": "^1.3.2",
    "svelte-markdown": "^0.4.1",
    "svelte-preprocess": "^5.1.4",
    "tailwind-merge": "^2.3.0",
    "tailwind-variants": "^0.1.20",
    "tailwindcss": "^3.4.3",
    "ts-node": "^10.9.1",
    "tslib": "^2.6.2",
    "tsx": "^3.14.0",
    "typescript": "^5.4.3",
    "uuid": "^9.0.1",
    "vaul-svelte": "^0.3.0",
    "vite": "^5.2.10",
    "vite-node": "^1.5.2",
    "vite-plugin-tailwind-purgecss": "^0.3.3",
    "vitest": "^1.3.1",
    "ws": "^8.16.0",
    "zod-to-json-schema": "^3.22.4"
  },
  "dependencies": {
    "@internationalized/date": "^3.5.2",
    "@unovis/svelte": "1.3.6-beta.1",
    "@unovis/ts": "1.3.6-beta.1",
    "bits-ui": "^0.21.4",
    "clsx": "^2.1.1",
    "cmdk-sv": "^0.0.15",
    "d3-scale": "^4.0.2",
    "embla-carousel-autoplay": "8.0.0-rc19",
    "embla-carousel-svelte": "8.0.0-rc19",
    "formsnap": "^0.5.1",
    "highlight.js": "^11.9.0",
    "mode-watcher": "^0.2.2",
    "nanoid": "^5.0.6",
    "paneforge": "^0.0.2",
    "svelte-headless-table": "^0.18.2",
    "svelte-legos": "^0.2.2",
    "svelte-local-storage-store": "^0.5.0",
    "svelte-radix": "^1.1.0",
    "svelte-sonner": "^0.3.19",
    "sveltekit-superforms": "^2.11.0",
    "swagger-ui": "^5.11.0",
    "vaul-svelte": "^0.0.6",
    "zod": "^3.22.4"
  },
  "type": "module"
}

[shawnlong636]

Thanks Ron, I'll try and reproduce with those config settings on a fresh repo today. Hopefully I can reproduce, otherwise we might be out of luck unless someone else can think of something.

[hugotox]

FWIW, deleting everything under .svelte-kit before starting the dev server made a huge improvement for me.