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

[N00nDay]

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

[N00nDay]

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.

[N00nDay]

"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