Treeshaking not working

[bangdragon]

When import only Chip with 'stwui/chip', the build size is 89KB.
Remove stwui and rebuild, the build size is 32KB

[Craig Howell]

I have a couple clarifying questions if I may:

• Are you actually looking at the build or just the build size?
• What does your import statement look like?

Any more information would be helpful.

[bangdragon]

I import with this code
import Chip from 'stwui/chip';
I build the production with code:
yarn build
And then
yarn run preview
to view production page. Than i download the web page via download icon in google chrome

[Craig Howell]

Import looks right. Did you check the build to see if there are other components or are you just looking at the bundle size? I am guessing tree shaking is working at you are just looking at the base package size of 57kb which is not bad in comparison to other yo libraries.

[bangdragon]

57KB is too much. One component cost 57KB is unacceptable.
I only import Chip component, because i just installed and test, so no other component in the build.

[Craig Howell]

"Unacceptable"? Seems a bit strong for someone using something for free. What does your tailwind.config look like? Package.json? Do you have a repo?

[bangdragon]

I just say my point of view.
The following code is after i removed stwui
Tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './src/**/*.{html,js,svelte,ts}',
   // './node_modules/stwui/**/*.{svelte,js,ts,html}'
  	],
	  plugins: [
		   require('@tailwindcss/forms'),
		   //require('stwui/plugin')
  ]
};

Package.json

{
	"name": "app",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"pages-preview": "npx wrangler pages dev .svelte-kit/cloudflare --port 8788",
		"build-preview": "vite build && npx wrangler pages dev .svelte-kit/cloudflare --port 8788",
		"build-publish": "vite build && npx wrangler pages publish .svelte-kit/cloudflare",
		"build-publish-preview": "vite build && npx wrangler pages publish .svelte-kit/cloudflare --branch preview",
		"pages-publish": "npx wrangler pages publish .svelte-kit/cloudflare",
		"pages-publish-preview": "npx wrangler pages publish .svelte-kit/cloudflare --branch preview",
		"dev": "npm-run-all --parallel vite typesafe-i18n",
		"vite": "vite dev --open",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
		"test": "playwright test",
		"test:unit": "vitest",
		"lint": "prettier --plugin-search-dir . --check . && eslint .",
		"format": "prettier --plugin-search-dir . --write .",
		"typesafe-i18n": "typesafe-i18n"
	},
	"devDependencies": {
		"@playwright/test": "^1.37.1",
		"@sveltejs/adapter-auto": "^2.1.0",
		"@sveltejs/adapter-cloudflare": "^2.3.3",
		"@sveltejs/kit": "^1.24.1",
		"@tailwindcss/forms": "^0.5.6",
		"autoprefixer": "^10.4.16",
		"benchmark": "^2.1.4",
		"eslint": "^8.49.0",
		"eslint-config-prettier": "^9.0.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"npm-run-all": "^4.1.5",
		"postcss": "^8.4.30",
		"prettier": "^3.0.3",
		"prettier-plugin-svelte": "^3.0.3",
		"sass": "^1.66.1",
		"svelte": "^4.2.0",
		"svelte-check": "^3.5.1",
		"tailwindcss": "^3.3.3",
		"typesafe-i18n": "^5.26.2",
		"typescript": "^5.2.2",
		"vite": "^4.4.9",
		"vitest": "^0.34.4",
		"wrangler": "2.20.0",
		"yarn-upgrade-all": "^0.7.2"
	},
	"type": "module",
	"dependencies": {
		"@square/svelte-store": "^1.0.17",
		"@supabase/auth-helpers-sveltekit": "^0.10.2",
		"@supabase/supabase-js": "^2.33.2",
		"js-cookie": "^3.0.5",
		"tailwind-merge": "^1.14.0"
	}
}

I don't have a repo.
And i forgot to mention that when following the guide on your website.
I cannot run this command successfully:

npx svelte-add@latest tailwindcss

So i install tailwind following this url:
https://tailwindcss.com/docs/guides/sveltekit

[bangdragon]

@N00nDay
The problem is solved.
After i reinstall library and rebuild the build size is 46kb.
I am sorry for my bad, so treeshaking actually worked