Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve bundle size after tree shaking #5317

Closed
chenjiahan opened this issue Jan 13, 2024 · 7 comments · Fixed by #5415
Closed

Improve bundle size after tree shaking #5317

chenjiahan opened this issue Jan 13, 2024 · 7 comments · Fixed by #5415
Assignees
@IWANABETHATGUY
Labels
feat New feature or request rsbuild rsbuild related

Comments

@chenjiahan
Copy link
Member

chenjiahan commented Jan 13, 2024 •
edited
Loading

What problem does this feature solve?

I noticed that in some cases, the bundle size of Rspack (v0.5.0) / Rsbuild is still larger than that of Vite / rollup after using new tree shaking.

I wonder if this is a bug or if the tree shaking strategy is different.

Test case

This is my test case:

https://github.com/chenjiahan/rsbuild-repro-tree-shaking-size

  • source code:
import { createApp } from "vue";
import { Button, Swipe } from "vant";

console.log(createApp, Button, Swipe);
  • npx rsbuild build with new tree shaking (91.9 kB):
➜  npx rsbuild build 

  Rsbuild v0.3.2

ready   Client compiled in 0.32 s
info    Production file sizes:

  File                                Size       Gzipped    
  dist/index.html                     0.26 kB    0.20 kB
  dist/static/js/index.1a4d2b1d.js    91.9 kB    33.9 kB

  Total size:  92.1 kB
  Gzipped size:  34.1 kB
  • npx rsbuild build without new tree shaking (361.4 kB):
➜  npx rsbuild build

ready   Client compiled in 0.34 s
info    Production file sizes:

  File                                Size        Gzipped    
  dist/index.html                     0.26 kB     0.20 kB
  dist/static/js/index.e227bbd7.js    361.4 kB    108.4 kB

  Total size:  361.7 kB
  Gzipped size:  108.6 kB
  • npx vite build (67.83 kB):
➜  npx vite build   
vite v5.0.11 building for production...
✓ 277 modules transformed.
dist/index.html                 0.30 kB │ gzip:  0.23 kB
dist/assets/index-tluu1stB.js  67.83 kB │ gzip: 27.65 kB
✓ built in 660ms
@chenjiahan chenjiahan added feat New feature or request pending triage The issue/PR is currently untouched. labels Jan 13, 2024
@github-actions github-actions bot added the team The issue/pr is created by the member of Rspack. label Jan 13, 2024
@chenjiahan chenjiahan added rsbuild rsbuild related and removed team The issue/pr is created by the member of Rspack. labels Jan 13, 2024
@IWANABETHATGUY
Copy link
Contributor

Can you try webpack? It would not be considered as a bug, if our bundle size isn't bigger than webpack (at least for current stage).

@chenjiahan
Copy link
Member Author

Sure, I will add webpack soon 😄

@chenjiahan
Copy link
Member Author

chenjiahan commented Jan 13, 2024 •
edited
Loading

I have updated the demo and added webpack.

The bundle size of webpack is 73.8 kB, smaller than Rspack, but still larger than Vite/Rollup. Maybe we can align with webpack first.

> rsbuild build --config ./rsbuild.config.webpack.mjs

  Rsbuild v0.3.2

ready   Client compiled in 0.95 s
info    Production file sizes:

  File                                Size       Gzipped    
  dist/index.html                     0.26 kB    0.20 kB
  dist/static/js/index.8effef00.js    73.8 kB    28.9 kB

  Total size:  74.1 kB
  Gzipped size:  29.1 kB
  • Rspack: 91.9 kB
  • webpack: 73.8 kB
  • rollup: 67.83 kB

@IWANABETHATGUY IWANABETHATGUY self-assigned this Jan 14, 2024
@Boshen Boshen removed the pending triage The issue/PR is currently untouched. label Jan 15, 2024
@chenjiahan chenjiahan mentioned this issue Jan 17, 2024
Merged
2 tasks
@IWANABETHATGUY
Copy link
Contributor

IWANABETHATGUY commented Jan 17, 2024 •
edited
Loading

rspack patch 0.5.0-canary-f37d888-20240116115414
image
webpack without concatenate module
image

@IWANABETHATGUY IWANABETHATGUY mentioned this issue Jan 17, 2024
Merged
2 tasks
@IWANABETHATGUY
Copy link
Contributor

The rest size diff caused by concatenateModule

@chenjiahan
Copy link
Member Author

👍 awesome

@IWANABETHATGUY
Copy link
Contributor

after enable concatenateModules the size reduced to
image

@IWANABETHATGUY IWANABETHATGUY mentioned this issue Jan 31, 2024
Merged
2 tasks
@chenjiahan chenjiahan changed the title Improve bundler size after tree shaking Improve bundle size after tree shaking Mar 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IWANABETHATGUY IWANABETHATGUY

Labels
feat New feature or request rsbuild rsbuild related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: concatenation module part two web-infra-dev/rspack
3 participants
@Boshen @chenjiahan @IWANABETHATGUY