RsBuild filebased routes with autoCodeSplitting doesn't works

JoseBuendiaDigio commented 4 weeks ago

Describe the bug

I was using files with lazy suffix for code splitting, after yesterday's announcement about autoCodeSplitting (https://github.com/TanStack/router/pull/2163) I wanted to use it. So, I followed https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting/#using-automatic-code-splitting and after that it seems that it doesn't works.

Before autoCodeSplitting:

After enable autoCodeSplitting:

Your Example Website or App

tests

Steps to Reproduce the Bug or Issue

Follow https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting/#using-automatic-code-splitting

Expected behavior

Should have more chunks

Screenshots or Videos

No response

Platform

OS: Windows

Additional context

No response

SeanCassiere commented 3 weeks ago

Retesting with the latest version shows that indeed, the codesplitting is happening.

Are you sure that you are using the newest version of @tanstack/router-plugin? Make sure you have https://github.com/TanStack/router/releases/tag/v1.49.3 installed.

Since a reproduction wasn't attached.

Make sure that you are correctly importing the plugin.

// rsbuild.config.ts
import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'
// ...

If this was an existing TSR project, you've followed the steps required for moving from the .lazy and virtual routes config to "stock": https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#preparing-your-route-files-for-automatic-code-splitting

JoseBuendiaDigio commented 3 weeks ago

Yes, I did all the necessary changes. I removed lazy files and moved the component to the not lazy file. I only have some routes.

I'm using latest version of all, rsbuild, and all tanstack packages, and yes the import is correct, route regeneration works well.

Maybe is due to that I'm importing the component from another file in the createFileRoute and not directly in the route file like in the examples?

SeanCassiere commented 3 weeks ago

Maybe is due to that I'm importing the component from another file in the createFileRoute and not directly in the route file like in the examples?

No that shouldn't matter, since the virtual file would have simply split out that external component import. Essentially, it'd look like this: https://github.com/TanStack/router/blob/main/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component%40split.tsx

I've also manually tested it using default import syntax for a component that's external and got the expected results. See below, top without code-splitting, bottom with code-splitting.

Unless you are importing components outside of the route into your App (above the RouterProvider), I can't quite tell why you are experiencing this.

For reference, just make sure you've checked out the rspack example and try it with autoCodeSplitting: true - https://github.com/TanStack/router/tree/main/examples/react/quickstart-rspack-file-based

JoseBuendiaDigio commented 3 weeks ago

I will try to have a minimal reproducible example and maybe I see the error, thanks

ThomasStock commented 3 weeks ago

Note: My AutoCodeSplitting also doesn't seem to work. Using "@tanstack/router-vite-plugin": "^1.49.3",

With tsr.config.json file:

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single",
  "autoCodeSplitting": true
}

Verified that the tsr.config.json file is being used

JoseBuendiaDigio commented 3 weeks ago

@ThomasStock Maybe you should use config from vite plugin?

SeanCassiere commented 3 weeks ago

@ThomasStock will need a reproduction. WIth Vite, code-splitting is working.

dmmikkel commented 3 weeks ago

I am having same issue with vite. Followed the guide, have the correct versions and config, yet no chunks.

ThomasStock commented 3 weeks ago

@dmmikkel I was still using the old vite plugin + my plugin order was wrong.

Make sure you are using @tanstack/router-plugin/vite
Make sure TanStackRouterVite() comes before react() in the plugins list

I decided not to use Auto code splitting for now as my wizard-style app became slower on poor connections due to the constant http traffic for tiny JS files on every page. I'll give it another look when auto codesplitting becomes configurable.

SeanCassiere commented 3 weeks ago

@JoseBuendiaDigio were you able to get a reproduction?

SeanCassiere commented 3 weeks ago

The plugin's split is relatively quite simple, just splitting a single file into two following the critical vs non-critical configuration items on code-splitting we have in the docs. The rest is left up to the bundlers to decide how they want to chunk your app js.

@ThomasStock what would that configuration look like? Considering the following file tree.

src/routes/
   _root.tsx
   index.tsx
   posts.tsx
   posts.postId.tsx
   posts/index.tsx

What sort of options are you looking for?

Ignore these files.

// vite config
TanStackRouterVite({
autoCodeSplitting: true,
codeSplittingIgnore: [
'posts/index.tsx',
'posts.postId.tsx'
]
})

Only run on these files.

// vite config
TanStackRouterVite({
autoCodeSplitting: true,
codeSplittingAccept: [
'posts/index.tsx',
'posts.postId.tsx'
]
})

Same as the above two, but with globs?
Or were you thinking of something else entirely?

JoseBuendiaDigio commented 3 weeks ago

@SeanCassiere I'm trying to get it but I can't reproduce it in a minimal way.

dmmikkel commented 3 weeks ago

I was using the new vite plugin and it was first.

SeanCassiere commented 3 weeks ago

@dmmikkel please open a new issue with a minimal reproducible example showing off your issue with you Vite setup.

@ThomasStock happy to continue the conversation on making these configurations on a fresh thread or even on Discord.

@JoseBuendiaDigio that's fine, when you are able to get a reproducible example please do open an issue with it.

Till then I'm closing this issue as we don't have a reproduction of code-splitting not working with Rspack.

nstepien commented 1 week ago

Could it be a OS-related bug? With autoCodeSplitting enabled, locally on my windows machine auto-code splitting doesn't work, but it works fine in our Linux CI.

I don't have a minimal reproducible example available at the moment, but it might be a clue. The OP is also running Windows.

SeanCassiere commented 1 week ago

Could it be a OS-related bug? With autoCodeSplitting enabled, locally on my windows machine auto-code splitting doesn't work, but it works fine in our Linux CI.

😖 why is it always windows...

We are working on an HMR fix that'll be removing pretty much all pathing-related special file-protocol prefixes which we are currently using in the code-splitting process (see PR 2316) that could potentially resolve this. @nstepien could you keep an eye on when that PR gets merged?

If it still persists afterwards, we'll likely have to summon Zack from the rspack team to help debug this if it is indeed a Windows related issue (since Linux and MacOS systems don't seem to be running into this).

nstepien commented 1 week ago

could you keep an eye on when that PR gets merged?

I'll be monitoring it, thanks!

greenhat616 commented 18 hours ago

@SeanCassiere Hello, I can confirm it exists on vite in windows

The Linux:

 ✓ 16103 modules transformed.
rendering chunks...
computing gzip size...
../../backend/tauri/tmp/dist/index.html                                          1.37 kB │ gzip:     0.58 kB
../../backend/tauri/tmp/dist/assets/clash-Cqz3v2cm.png                          14.43 kB
../../backend/tauri/tmp/dist/assets/clash-rs-COmmC25G.png                       22.76 kB
../../backend/tauri/tmp/dist/assets/codicon-DCmgc-ay.ttf                        80.34 kB
../../backend/tauri/tmp/dist/assets/clash.meta-uqWbsmWL.png                     81.17 kB
../../backend/tauri/tmp/dist/assets/Twemoji.Mozilla-BSQKJ6aF.ttf             1,474.28 kB
../../backend/tauri/tmp/dist/assets/editor.worker-Clw5SIJX.js                1,706.25 kB
../../backend/tauri/tmp/dist/assets/json.worker-ZmvHD9lO.js                  2,488.54 kB
../../backend/tauri/tmp/dist/assets/monaco-yaml.worker-mK4B4Lsz.js           5,856.82 kB

../../backend/tauri/tmp/dist/assets/ts.worker-h0OJzMJM.js                   29,483.99 kB
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
../../backend/tauri/tmp/dist/assets/proxies-sGJ-GnCh.css                         0.15 kB │ gzip:     0.09 kB
../../backend/tauri/tmp/dist/assets/setting-page-Cc_JGCvs.css                    0.22 kB │ gzip:     0.18 kB
../../backend/tauri/tmp/dist/assets/log-page-BDOMZhzN.css                        0.25 kB │ gzip:     0.16 kB
../../backend/tauri/tmp/dist/assets/clash-field-BFRaLzoo.css                     0.30 kB │ gzip:     0.16 kB
../../backend/tauri/tmp/dist/assets/index-oYqyqlBN.css                           0.53 kB │ gzip:     0.30 kB
../../backend/tauri/tmp/dist/assets/settings-BrHeSv3r.css                        0.64 kB │ gzip:     0.31 kB
../../backend/tauri/tmp/dist/assets/updater-dialog-B-gWoHSC.css                  1.24 kB │ gzip:     0.31 kB
../../backend/tauri/tmp/dist/assets/index-CoK235ZP.css                          36.79 kB │ gzip:     7.43 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-viewer-BVBSAuve.css         128.64 kB │ gzip:    19.95 kB
../../backend/tauri/tmp/dist/assets/tsWorker-CdhPdD7q.js                         0.24 kB │ gzip:     0.23 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/jsonWorker-CdhPdD7q.js                       0.24 kB │ gzip:     0.24 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/_layout-hfXzhFMu.js                          0.43 kB │ gzip:     0.34 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/index-hP9VSi8U.js                            0.58 kB │ gzip:     0.43 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/Done-uTjYe_zt.js                             1.11 kB │ gzip:     0.84 kB │ map:      0.68 kB
../../backend/tauri/tmp/dist/assets/ExpandMore-Btbgm_UA.js                       1.16 kB │ gzip:     0.86 kB │ map:      0.71 kB
../../backend/tauri/tmp/dist/assets/ArrowDownward-DqGK7-p1.js                    1.21 kB │ gzip:     0.89 kB │ map:      0.73 kB
../../backend/tauri/tmp/dist/assets/index-CT_BkcUw.js                            1.25 kB │ gzip:     0.84 kB │ map:      0.77 kB
../../backend/tauri/tmp/dist/assets/Visibility-D8IphdOQ.js                       1.53 kB │ gzip:     1.08 kB │ map:      0.86 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-diff-viewer-Dr1dxcs2.js       1.89 kB │ gzip:     1.10 kB │ map:      0.72 kB
../../backend/tauri/tmp/dist/assets/index-qj-GrRur.js                            1.93 kB │ gzip:     1.12 kB │ map:      1.21 kB
../../backend/tauri/tmp/dist/assets/theme-Dv7EfXoE.js                            1.97 kB │ gzip:     1.16 kB │ map:      1.21 kB
../../backend/tauri/tmp/dist/assets/content-display-DfHKSGEv.js                  2.20 kB │ gzip:     1.27 kB │ map:      1.33 kB
../../backend/tauri/tmp/dist/assets/VisibilityOff-BtRyuuSz.js                    2.21 kB │ gzip:     1.50 kB │ map:      1.16 kB
../../backend/tauri/tmp/dist/assets/index-CWUAaxqy.js                            2.26 kB │ gzip:     1.42 kB │ map:      1.37 kB
../../backend/tauri/tmp/dist/assets/parse-traffic-BUmLNSsM.js                    2.75 kB │ gzip:     1.65 kB │ map:      1.73 kB
../../backend/tauri/tmp/dist/assets/rules-Cv6jhl4B.js                            3.04 kB │ gzip:     1.54 kB │ map:      0.47 kB
../../backend/tauri/tmp/dist/assets/index-C3sk6D1F.js                            4.43 kB │ gzip:     2.42 kB │ map:      2.82 kB
../../backend/tauri/tmp/dist/assets/index-Cnj9rVOc.js                            5.43 kB │ gzip:     2.54 kB │ map:      3.34 kB
../../backend/tauri/tmp/dist/assets/useClashCore-MCMim4DB.js                     6.58 kB │ gzip:     2.57 kB │ map:      4.08 kB
../../backend/tauri/tmp/dist/assets/rule-page-Bb8_SbA4.js                        6.91 kB │ gzip:     3.30 kB │ map:      3.95 kB
../../backend/tauri/tmp/dist/assets/index-Lu_95Q0i.js                           10.56 kB │ gzip:     4.10 kB │ map:      6.40 kB
../../backend/tauri/tmp/dist/assets/lua-DWEneg7V.js                             11.03 kB │ gzip:     4.55 kB │ map:      6.45 kB
../../backend/tauri/tmp/dist/assets/log-page-ByiakNhX.js                        11.70 kB │ gzip:     5.26 kB │ map:      7.11 kB
../../backend/tauri/tmp/dist/assets/connections-CmRBdQgZ.js                     13.69 kB │ gzip:     6.52 kB │ map:      8.05 kB
../../backend/tauri/tmp/dist/assets/updater-dialog-DGZLloe7.js                  14.15 kB │ gzip:     6.40 kB │ map:      8.65 kB
../../backend/tauri/tmp/dist/assets/system-proxy-BKJD8p9P.js                    14.94 kB │ gzip:     6.78 kB │ map:      9.74 kB
../../backend/tauri/tmp/dist/assets/Portal-DEJInR3U.js                          15.05 kB │ gzip:     6.39 kB │ map:     10.13 kB
../../backend/tauri/tmp/dist/assets/logs-CtYzNknw.js                            15.15 kB │ gzip:     6.81 kB │ map:      8.72 kB
../../backend/tauri/tmp/dist/assets/yaml-gTezRrck.js                            20.41 kB │ gzip:     7.96 kB │ map:     11.50 kB
../../backend/tauri/tmp/dist/assets/MenuItem-F1nv1FR1.js                        24.25 kB │ gzip:     9.06 kB │ map:     15.22 kB
../../backend/tauri/tmp/dist/assets/providers-B-KeU-jk.js                       26.38 kB │ gzip:     8.30 kB │ map:     15.01 kB
../../backend/tauri/tmp/dist/assets/javascript-B28EYAto.js                      30.82 kB │ gzip:    11.16 kB │ map:     17.47 kB
../../backend/tauri/tmp/dist/assets/LinearProgress-Im54iriU.js                  36.28 kB │ gzip:    11.80 kB │ map:     22.22 kB
../../backend/tauri/tmp/dist/assets/settings-DXvSICF_.js                        40.22 kB │ gzip:    16.09 kB │ map:     23.02 kB
../../backend/tauri/tmp/dist/assets/Grid2-4C199kaZ.js                           45.76 kB │ gzip:    14.24 kB │ map:     30.05 kB
../../backend/tauri/tmp/dist/assets/yamlWorker-CnPwMHco.js                      46.77 kB │ gzip:    16.60 kB │ map:     26.31 kB
../../backend/tauri/tmp/dist/assets/index-D8rhH2M8.js                           47.02 kB │ gzip:    18.89 kB │ map:     29.05 kB
../../backend/tauri/tmp/dist/assets/Chip-D9zeAizl.js                            54.92 kB │ gzip:    16.31 kB │ map:     33.84 kB
../../backend/tauri/tmp/dist/assets/clash-field-8DsB9890.js                     58.77 kB │ gzip:    21.56 kB │ map:     37.03 kB
../../backend/tauri/tmp/dist/assets/index-CG2ql_zd.js                           90.54 kB │ gzip:    26.96 kB │ map:     54.34 kB
../../backend/tauri/tmp/dist/assets/proxies-BU6Q3wo4.js                         93.62 kB │ gzip:    29.90 kB │ map:     56.04 kB
../../backend/tauri/tmp/dist/assets/index-liF-__FH.js                          105.04 kB │ gzip:    30.88 kB │ map:     72.59 kB
../../backend/tauri/tmp/dist/assets/baseErrorBoundary-D5xsmd7o.js              116.84 kB │ gzip:    34.74 kB │ map:     74.95 kB
../../backend/tauri/tmp/dist/assets/tsMode-Cpn9Q1j3.js                         118.72 kB │ gzip:    31.92 kB │ map:     71.30 kB
../../backend/tauri/tmp/dist/assets/shell-COUFylBb.js                          129.78 kB │ gzip:    23.79 kB │ map:     68.47 kB
../../backend/tauri/tmp/dist/assets/Switch-RxhuGq1j.js                         194.45 kB │ gzip:    57.38 kB │ map:    124.35 kB
../../backend/tauri/tmp/dist/assets/dashboard-nNSa79-J.js                      200.11 kB │ gzip:    61.33 kB │ map:    126.99 kB
../../backend/tauri/tmp/dist/assets/Tooltip-DdHVG-ga.js                        279.19 kB │ gzip:    80.69 kB │ map:    184.39 kB
../../backend/tauri/tmp/dist/assets/Cancel-DOgrV_ml.js                         289.44 kB │ gzip:    78.77 kB │ map:    186.42 kB
../../backend/tauri/tmp/dist/assets/TextField-C59UXKgk.js                      542.52 kB │ gzip:   148.91 kB │ map:    354.96 kB
../../backend/tauri/tmp/dist/assets/profiles-BS0iNDmI.js                       543.12 kB │ gzip:   154.74 kB │ map:    350.27 kB
../../backend/tauri/tmp/dist/assets/setting-page-DFk8OSS-.js                 1,013.15 kB │ gzip:   284.10 kB │ map:    621.06 kB
../../backend/tauri/tmp/dist/assets/index-BN7wlk6z.js                        1,015.03 kB │ gzip:   261.56 kB │ map:    686.71 kB
../../backend/tauri/tmp/dist/assets/editorWorker-B27wgkY_.js                 1,840.04 kB │ gzip:   479.20 kB │ map:  1,162.07 kB
../../backend/tauri/tmp/dist/assets/shiki-BJhtqesd.js                        2,162.74 kB │ gzip:   738.56 kB │ map:  1,063.11 kB
../../backend/tauri/tmp/dist/assets/connection-page-BbY9OW3O.js              3,417.31 kB │ gzip:   864.38 kB │ map:  2,204.64 kB
../../backend/tauri/tmp/dist/assets/index-DI3yl5qi.js                        6,991.08 kB │ gzip: 1,895.18 kB │ map:  4,508.30 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-viewer-BDwiI-TO.js       18,467.09 kB │ gzip: 4,488.85 kB │ map: 11,368.23 kB
✓ built in 1m 3s

The windows:

 ✓ 16094 modules transformed.
rendering chunks...
computing gzip size...
../../backend/tauri/tmp/dist/index.html                                          1.41 kB │ gzip:     0.58 kB
../../backend/tauri/tmp/dist/assets/clash-Cqz3v2cm.png                          14.43 kB
../../backend/tauri/tmp/dist/assets/clash-rs-COmmC25G.png                       22.76 kB
../../backend/tauri/tmp/dist/assets/codicon-DCmgc-ay.ttf                        80.34 kB
../../backend/tauri/tmp/dist/assets/clash.meta-uqWbsmWL.png                     81.17 kB
../../backend/tauri/tmp/dist/assets/Twemoji.Mozilla-BSQKJ6aF.ttf             1,474.28 kB
../../backend/tauri/tmp/dist/assets/editor.worker-Clw5SIJX.js                1,706.25 kB
../../backend/tauri/tmp/dist/assets/json.worker-ZmvHD9lO.js                  2,488.54 kB
../../backend/tauri/tmp/dist/assets/monaco-yaml.worker-mK4B4Lsz.js           5,856.82 kB
../../backend/tauri/tmp/dist/assets/ts.worker-h0OJzMJM.js                   29,483.99 kB
../../backend/tauri/tmp/dist/assets/setting-page-Cc_JGCvs.css                    0.22 kB │ gzip:     0.18 kB
../../backend/tauri/tmp/dist/assets/log-page-BDOMZhzN.css                        0.25 kB │ gzip:     0.16 kB
../../backend/tauri/tmp/dist/assets/updater-dialog-B-gWoHSC.css                  1.24 kB │ gzip:     0.31 kB
../../backend/tauri/tmp/dist/assets/index-CDhks89K.css                          38.41 kB │ gzip:     7.78 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-viewer-BVBSAuve.css         128.64 kB │ gzip:    19.95 kB
../../backend/tauri/tmp/dist/assets/tsWorker-CdhPdD7q.js                         0.24 kB │ gzip:     0.23 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/jsonWorker-CdhPdD7q.js                       0.24 kB │ gzip:     0.24 kB │ map:      0.10 kB
../../backend/tauri/tmp/dist/assets/ExpandMore-C7zU6TzH.js                       1.16 kB │ gzip:     0.86 kB │ map:      0.71 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-diff-viewer-DZVTm73m.js       1.29 kB │ gzip:     0.86 kB │ map:      0.74 kB
../../backend/tauri/tmp/dist/assets/rule-page-BmVoNH7l.js                        6.82 kB │ gzip:     3.17 kB │ map:      4.13 kB
../../backend/tauri/tmp/dist/assets/lua-DWEneg7V.js                             11.03 kB │ gzip:     4.55 kB │ map:      6.45 kB
../../backend/tauri/tmp/dist/assets/log-page-E5dE8L6N.js                        11.74 kB │ gzip:     5.15 kB │ map:      7.42 kB
../../backend/tauri/tmp/dist/assets/updater-dialog-DGYMeiCm.js                  14.43 kB │ gzip:     6.38 kB │ map:      8.92 kB
../../backend/tauri/tmp/dist/assets/yaml-duHfpOCs.js                            19.79 kB │ gzip:     7.68 kB │ map:     11.50 kB
../../backend/tauri/tmp/dist/assets/javascript-CPIXL9Bu.js                      30.19 kB │ gzip:    10.87 kB │ map:     17.46 kB
../../backend/tauri/tmp/dist/assets/yamlWorker-CnPwMHco.js                      46.77 kB │ gzip:    16.60 kB │ map:     26.31 kB
../../backend/tauri/tmp/dist/assets/index-DQ_SBzJQ.js                           90.55 kB │ gzip:    26.95 kB │ map:     54.34 kB
../../backend/tauri/tmp/dist/assets/tsMode-BwYXVDWJ.js                         118.10 kB │ gzip:    31.66 kB │ map:     71.30 kB
../../backend/tauri/tmp/dist/assets/shell-COUFylBb.js                          129.78 kB │ gzip:    23.79 kB │ map:     68.47 kB
../../backend/tauri/tmp/dist/assets/index-CjxjK4Qu.js                        1,015.03 kB │ gzip:   261.60 kB │ map:    686.71 kB
../../backend/tauri/tmp/dist/assets/setting-page-euQc3X_0.js                 1,020.29 kB │ gzip:   284.79 kB │ map:    626.83 kB
../../backend/tauri/tmp/dist/assets/editorWorker-B27wgkY_.js                 1,840.04 kB │ gzip:   479.20 kB │ map:  1,162.07 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
../../backend/tauri/tmp/dist/assets/shiki-BEBrcYmJ.js                        2,162.82 kB │ gzip:   738.60 kB │ map:  1,063.17 kB
../../backend/tauri/tmp/dist/assets/connection-page-DrpEewuw.js              3,417.36 kB │ gzip:   864.21 kB │ map:  2,205.12 kB
../../backend/tauri/tmp/dist/assets/index-CMJguK2W.js                        9,832.29 kB │ gzip: 2,664.29 kB │ map:  6,351.87 kB
../../backend/tauri/tmp/dist/assets/profile-monaco-viewer-DGL_D3uH.js       18,466.65 kB │ gzip: 4,488.54 kB │ map: 11,368.56 kB
✓ built in 1m 18s

You could checkout the full log ctx in https://github.com/libnyanpasu/clash-nyanpasu/actions/runs/10923894230/job/30321656413

TanStack / router