🐞 BUG: Headless Accordion import downloads more components

[moxival]

Hey guys,

we are currently trying to use the accordion in our qwik app.

We are importing the accordion components like this: import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "@qwik-ui/headless";

After build there is a new chunk with size 197.69KB.

Inside this chunk I think I see the phone input component with huge arrays of countries and flags and country codes.

Are we importing it wrong or is it something to do with the build process?

[shairez]

Hi @moxival Thanks for the report! Are you seeing this in dev mode or in preview?

[moxival]

Hi @shairez , sorry for the delay. I see this in preview and build.

[wmertens]

I see that the build puts all the code in a single mjs or cjs file at the root, and the src/ dir is only for .d.ts files.

The .mjs file does export properly though. For some reason your build process isn't treeshaking properly? It should remove all functions that it doesn't use.

I do note that not all functions are tagged with /* @__PURE__ */, maybe that's related? Can you check which functions are in the build?

See https://unpkg.com/browse/@qwik-ui/headless@0.1.13/ and https://unpkg.com/browse/@qwik-ui/headless@0.1.13/index.qwik.mjs

maybe the qwik-ui build needs

            rollupOptions: {
                preserveModules: true,

but that wouldn't explain the lack of tree shaking

[moxival]

I am not sure how to check that, the file is huge, one thing I can clearly see the "phone input" is there - there are tones of {name:"Angola",dial_code:"+244",code:"AO",flag:"🇦🇴"} but I think I can see something about buttons as well :confused:

For a brand new Qwik App (no demo app, just barebones index.tsx), this is what I see when i build it:

> my-qwik-empty-starter@ build.client /home/ivalentinov/workspace/frontend/qwik-app
> vite build

vite v4.4.7 building for production...
✓ 45 modules transformed.
dist/q-manifest.json       14.88 kB │ gzip:  2.59 kB
dist/build/q-e94350af.css   0.31 kB │ gzip:  0.23 kB
dist/build/q-5980531f.js    0.10 kB │ gzip:  0.11 kB
dist/build/q-07ef7181.js    0.13 kB │ gzip:  0.12 kB
dist/build/q-57fbe623.js    0.13 kB │ gzip:  0.13 kB
dist/build/q-bbe2580a.js    0.20 kB │ gzip:  0.16 kB
dist/build/q-36856a5d.js    0.27 kB │ gzip:  0.23 kB
dist/build/q-abf47c83.js    0.28 kB │ gzip:  0.22 kB
dist/build/q-e648534b.js    0.29 kB │ gzip:  0.24 kB
dist/build/q-7d1f65e0.js    0.47 kB │ gzip:  0.32 kB
dist/build/q-f0c0eac3.js    0.54 kB │ gzip:  0.33 kB
dist/build/q-c97c7816.js    0.67 kB │ gzip:  0.40 kB
dist/build/q-b502647b.js    0.75 kB │ gzip:  0.46 kB
dist/build/q-fe367d77.js    0.79 kB │ gzip:  0.51 kB
dist/build/q-31fe007a.js    0.89 kB │ gzip:  0.56 kB
dist/build/q-9e15b08e.js    1.04 kB │ gzip:  0.65 kB
dist/build/q-e0952c51.js    1.14 kB │ gzip:  0.67 kB
dist/build/q-663033b0.js    2.29 kB │ gzip:  1.11 kB
dist/service-worker.js      2.54 kB │ gzip:  1.21 kB
dist/build/q-5a21fd22.js    5.52 kB │ gzip:  2.37 kB
dist/build/q-0f5e4401.js    5.78 kB │ gzip:  2.85 kB
dist/build/q-21fb0a49.js   46.07 kB │ gzip: 18.59 kB
✓ built in 705ms

✓ Built client modules

> my-qwik-empty-starter@ build.server /home/ivalentinov/workspace/frontend/qwik-app
> vite build -c adapters/express/vite.config.ts

vite v4.4.7 building SSR bundle for production...
transforming...
✓ 17 modules transformed.
rendering chunks...
server/build/q-e94350af.css                  0.31 kB
server/entry.ssr.mjs                         0.12 kB
server/@qwik-city-plan.mjs                   0.22 kB
server/entry.express.mjs                    20.81 kB
server/assets/entry.ssr-f8d71fdb.mjs        41.94 kB
server/assets/@qwik-city-plan-aa63efca.mjs  69.75 kB

Starting Qwik City SSG...

SSG results
- Duration: 3.8 ms

✓ built in 2.45s
✓ Built server (ssr) modules
✓ Type checked
✓ Lint checked

After installing the QwikUI library with pnpm install -D @qwik-ui/headless WITHOUT using it in the index.tsx, this is what I see after build

> my-qwik-empty-starter@ build.client /home/ivalentinov/workspace/frontend/qwik-app
> vite build

vite v4.4.7 building for production...
✓ 359 modules transformed.
dist/q-manifest.json       160.94 kB │ gzip: 22.21 kB
dist/build/q-e94350af.css    0.31 kB │ gzip:  0.23 kB
dist/build/q-4fff94d2.js     0.10 kB │ gzip:  0.11 kB
dist/build/q-a9afc8e6.js     0.10 kB │ gzip:  0.11 kB
dist/build/q-eae16132.js     0.11 kB │ gzip:  0.12 kB
dist/build/q-9cc72b2c.js     0.11 kB │ gzip:  0.13 kB
dist/build/q-0ce6b8f6.js     0.13 kB │ gzip:  0.12 kB
dist/build/q-63aa7b37.js     0.13 kB │ gzip:  0.13 kB
dist/build/q-b21d9f0d.js     0.14 kB │ gzip:  0.14 kB
dist/build/q-85473c61.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-3114ac9c.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-4d1e277d.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-3762d521.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-223abeea.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-4fcd72ca.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-1d33a6ad.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-20a78e1a.js     0.15 kB │ gzip:  0.15 kB
dist/build/q-936a2e0a.js     0.16 kB │ gzip:  0.15 kB
dist/build/q-cbf01ca4.js     0.16 kB │ gzip:  0.16 kB
dist/build/q-36496bfe.js     0.17 kB │ gzip:  0.16 kB
dist/build/q-9a148013.js     0.20 kB │ gzip:  0.18 kB
dist/build/q-8bbc4d94.js     0.20 kB │ gzip:  0.16 kB
dist/build/q-ece7a393.js     0.22 kB │ gzip:  0.18 kB
dist/build/q-32bfbfb0.js     0.23 kB │ gzip:  0.20 kB
dist/build/q-ca724f95.js     0.23 kB │ gzip:  0.20 kB
dist/build/q-fba6b65a.js     0.24 kB │ gzip:  0.20 kB
dist/build/q-73bf4352.js     0.25 kB │ gzip:  0.20 kB
dist/build/q-88381ad1.js     0.25 kB │ gzip:  0.22 kB
dist/build/q-290bc2d5.js     0.25 kB │ gzip:  0.22 kB
dist/build/q-641b606f.js     0.26 kB │ gzip:  0.21 kB
dist/build/q-320aca01.js     0.26 kB │ gzip:  0.22 kB
dist/build/q-0291f653.js     0.26 kB │ gzip:  0.22 kB
dist/build/q-5f87d66f.js     0.27 kB │ gzip:  0.23 kB
dist/build/q-a6bb034d.js     0.28 kB │ gzip:  0.23 kB
dist/build/q-156fe6ac.js     0.28 kB │ gzip:  0.22 kB
dist/build/q-4440a5de.js     0.29 kB │ gzip:  0.23 kB
dist/build/q-c7480497.js     0.30 kB │ gzip:  0.24 kB
dist/build/q-14a4eabc.js     0.30 kB │ gzip:  0.24 kB
dist/build/q-e790faaa.js     0.34 kB │ gzip:  0.26 kB
dist/build/q-7b061d61.js     0.41 kB │ gzip:  0.30 kB
dist/build/q-a05f2295.js     0.42 kB │ gzip:  0.29 kB
dist/build/q-582ddbfa.js     0.42 kB │ gzip:  0.31 kB
dist/build/q-14e35e21.js     0.47 kB │ gzip:  0.32 kB
dist/build/q-79906740.js     0.47 kB │ gzip:  0.30 kB
dist/build/q-3fe68f39.js     0.51 kB │ gzip:  0.35 kB
dist/build/q-5ab2da21.js     0.52 kB │ gzip:  0.37 kB
dist/build/q-b5d1ab90.js     0.54 kB │ gzip:  0.32 kB
dist/build/q-04d01d75.js     0.55 kB │ gzip:  0.36 kB
dist/build/q-6186676d.js     0.63 kB │ gzip:  0.41 kB
dist/build/q-d4dacd9d.js     0.65 kB │ gzip:  0.41 kB
dist/build/q-149706db.js     0.67 kB │ gzip:  0.40 kB
dist/build/q-ad35a8c9.js     0.73 kB │ gzip:  0.46 kB
dist/build/q-135828fc.js     0.74 kB │ gzip:  0.46 kB
dist/build/q-bb215fc4.js     0.75 kB │ gzip:  0.46 kB
dist/build/q-b337c549.js     0.79 kB │ gzip:  0.48 kB
dist/build/q-140b0fd8.js     0.79 kB │ gzip:  0.51 kB
dist/build/q-55945cf0.js     0.87 kB │ gzip:  0.47 kB
dist/build/q-d167dad8.js     0.87 kB │ gzip:  0.51 kB
dist/build/q-7c64a4f9.js     0.88 kB │ gzip:  0.52 kB
dist/build/q-c74a6f8c.js     0.89 kB │ gzip:  0.50 kB
dist/build/q-551bfcb8.js     0.89 kB │ gzip:  0.56 kB
dist/build/q-b4bbfbe8.js     0.90 kB │ gzip:  0.48 kB
dist/build/q-4c9d6783.js     1.02 kB │ gzip:  0.57 kB
dist/build/q-ccc7dff6.js     1.03 kB │ gzip:  0.65 kB
dist/build/q-824be1f9.js     1.04 kB │ gzip:  0.56 kB
dist/build/q-96386a80.js     1.04 kB │ gzip:  0.59 kB
dist/build/q-c5b26128.js     1.11 kB │ gzip:  0.59 kB
dist/build/q-54e6c03b.js     1.14 kB │ gzip:  0.67 kB
dist/build/q-12cd6fa1.js     1.17 kB │ gzip:  0.65 kB
dist/build/q-f7f3e647.js     1.19 kB │ gzip:  0.56 kB
dist/build/q-449d232e.js     1.26 kB │ gzip:  0.62 kB
dist/build/q-730f2735.js     1.30 kB │ gzip:  0.72 kB
dist/build/q-556f0fd9.js     1.36 kB │ gzip:  0.67 kB
dist/build/q-3715604b.js     1.38 kB │ gzip:  0.62 kB
dist/build/q-19b113fa.js     1.39 kB │ gzip:  0.72 kB
dist/build/q-e0368916.js     1.44 kB │ gzip:  0.80 kB
dist/build/q-471c7d19.js     1.45 kB │ gzip:  0.70 kB
dist/build/q-97abf3c4.js     1.54 kB │ gzip:  0.82 kB
dist/build/q-f4377d79.js     1.62 kB │ gzip:  0.78 kB
dist/build/q-e8942dbb.js     1.63 kB │ gzip:  0.80 kB
dist/build/q-a0c55402.js     1.75 kB │ gzip:  0.81 kB
dist/build/q-d7f4d3f8.js     2.10 kB │ gzip:  1.03 kB
dist/build/q-6cdde5fe.js     2.19 kB │ gzip:  1.07 kB
dist/build/q-663033b0.js     2.29 kB │ gzip:  1.11 kB
dist/build/q-9aced94d.js     2.35 kB │ gzip:  1.03 kB
dist/build/q-c6d99166.js     2.40 kB │ gzip:  1.05 kB
dist/build/q-eab5c9f2.js     2.49 kB │ gzip:  1.01 kB
dist/service-worker.js       2.54 kB │ gzip:  1.21 kB
dist/build/q-d96bd4e8.js     2.65 kB │ gzip:  1.23 kB
dist/build/q-5c099089.js     2.71 kB │ gzip:  1.11 kB
dist/build/q-4e462f62.js     2.71 kB │ gzip:  1.16 kB
dist/build/q-934e9e80.js     3.01 kB │ gzip:  1.19 kB
dist/build/q-0827b14a.js     3.23 kB │ gzip:  1.31 kB
dist/build/q-228b5dc1.js     4.19 kB │ gzip:  1.61 kB
dist/build/q-62bb6e24.js     5.33 kB │ gzip:  2.00 kB
dist/build/q-f9992d52.js     5.53 kB │ gzip:  2.36 kB
dist/build/q-e00d46b2.js     5.78 kB │ gzip:  2.85 kB
dist/build/q-f7529e61.js    49.63 kB │ gzip: 20.14 kB
dist/build/q-316904a9.js   197.11 kB │ gzip: 51.96 kB
✓ built in 1.38s

✓ Built client modules

> my-qwik-empty-starter@ build.server /home/ivalentinov/workspace/frontend/qwik-app
> vite build -c adapters/express/vite.config.ts

vite v4.4.7 building SSR bundle for production...
transforming...
✓ 17 modules transformed.
rendering chunks...
server/build/q-e94350af.css                   0.31 kB
server/entry.ssr.mjs                          0.12 kB
server/@qwik-city-plan.mjs                    0.22 kB
server/entry.express.mjs                     20.81 kB
server/assets/@qwik-city-plan-72820178.mjs   69.75 kB
server/assets/entry.ssr-efbed7d1.mjs        144.23 kB

Starting Qwik City SSG...

SSG results
- Duration: 4.6 ms

✓ built in 2.42s
✓ Built server (ssr) modules
✓ Type checked
✓ Lint checked

I really have no idea what is happening - is it something only happening to me?

[moxival]

Hey guys, any news on this one - we could easily implement the accordion ourselves but the idea to use QwikUI was kinda cool :smile_cat:

[shairez]

We'll try to tackle this issue during this sprint

[shairez]

I verified that this is in fact an issue with Qwik's lack of tree shaking the unused code from the library.

We'll switch to a different build strategy to make it more efficient and I also filed an issue on the Qwik Repo

Thanks again for the report @moxival !