Skip to content

chore: use Rslib to bundle @rspack/core#9899

Merged
chenjiahan merged 8 commits intomainfrom
chore/use-rslib
Apr 15, 2025
Merged

chore: use Rslib to bundle @rspack/core#9899
chenjiahan merged 8 commits intomainfrom
chore/use-rslib

Conversation

@Timeless0911
Copy link
Contributor

@Timeless0911 Timeless0911 commented Apr 3, 2025 •
edited
Loading

Summary

This PR use Rslib to bundle @rspack/core.

Bundle size:

  • tsup:
    • dist/cssExtractHmr.js: 5.70 KB = 5.57 kB
    • dist/cssExtractLoader.js: 10.27 KB = 10.03 kB
    • dist/worker.js: 66.83 KB = 65.26 kB
    • dist/index.js: 695.87 KB = 712.57 kB
  • Rslib:
    • dist/cssExtractHmr.js: 6.2 kB
    • dist/cssExtractLoader.js: 10.6 kB
    • dist/worker.js: 71.5 kB
    • dist/index.js: 772.0 kB

Below are some things that need to be explained and documented:

  • Remove tsc since Rslib use Typescript Compiler API to genenrate declaration files.
  • Remove tsc-alias since Rslib internally support redirect alias in declaration files via @ast-grep/napi.
  • Add a new tsconfig.api.extractor.json file to override paths in tsconfig.json since api-extractor will throw errors if correct paths which in prebundle folder compiled are applied.
    image
  • Add an empty CachedInputFileSystem.d.ts file to prevent ts error when prebundle.
  • Remove the modification for prebundled index.d.ts for ResolveRequest type export since it is not used now.
  • Use import z from "zod"; instead of import { z } from "zod";
    • Now: image
    • Before: image
  • Remove module.exports = rspack; in source code and add a footer js: "module.exports = __webpack_exports__.default;" instead to make default export in cjs work.
  • Add a footer module.exports = __webpack_exports__.default; when bundle worker.js to make default export in cjs work.
  • Remove some @ts-expect-error since we use correct paths in tsconfig.json now.
  • Modify { __webpack_require__ } to { __webpack_require__: __webpack_require__ } to avoid parser bug. can be reset when fix: should rename __webpack_require__ pat in parameters #10036 is released in Rslib.

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@netlify
Copy link

netlify bot commented Apr 3, 2025 •
edited
Loading

✅ Deploy Preview for rspack canceled.

Name Link
🔨 Latest commit 2d0a495
🔍 Latest deploy log https://app.netlify.com/sites/rspack/deploys/67fe5069aeae1a00084b5b10

@codspeed-hq
Copy link

codspeed-hq bot commented Apr 3, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #9899 will not alter performance

Comparing chore/use-rslib (2d0a495) with main (66602bd)

Summary

✅ 11 untouched benchmarks

@Timeless0911 Timeless0911 force-pushed the chore/use-rslib branch 2 times, most recently from 0afc46d to e1809b7 Compare April 9, 2025 12:42
@Timeless0911 Timeless0911 changed the title chore: use Rslib to bundle rspack/core chore: use Rslib to bundle @rspack/core Apr 9, 2025
@Timeless0911 Timeless0911 force-pushed the chore/use-rslib branch 6 times, most recently from 8e3082a to 5caf36c Compare April 15, 2025 09:28
@Timeless0911 Timeless0911 marked this pull request as ready for review April 15, 2025 10:12
Timeless0911
Timeless0911 commented Apr 15, 2025
View reviewed changes
@fi3ework fi3ework mentioned this pull request Apr 15, 2025
Closed
2 tasks
@fi3ework
Copy link
Member

fi3ework commented Apr 15, 2025

I think the bloated bundled size is due to Rspack doesn't allow concatenated module for CJS output?

chenjiahan
chenjiahan approved these changes Apr 15, 2025
View reviewed changes
Copy link
Member

@chenjiahan chenjiahan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM👍

After checking the snapshots, I found that the __nested_webpack_require_18_37__ variable is quite ugly.

Maybe we should use scripts/prepare-container-runtime.js (or some other methods) to transform src/runtime/cssExtractHmr.ts to improve the generated code.

@chenjiahan
Copy link
Member

chenjiahan commented Apr 15, 2025

I think the bloated bundled size is due to Rspack doesn't allow concatenated module for CJS output?

We can use the same minify config as Rsbuild to output a smaller bundle size. https://github.com/web-infra-dev/rsbuild/blob/6c2a605b7cfc2c07a8d1f47ed706d6abe6ab12c3/scripts/config/rslib.config.ts#L9-L20

@chenjiahan
Copy link
Member

chenjiahan commented Apr 15, 2025

Let's merge this PR first and further optimize the bundle size and output code readability in subsequent PRs.

@chenjiahan chenjiahan merged commit 732b642 into main Apr 15, 2025
27 checks passed
@chenjiahan chenjiahan deleted the chore/use-rslib branch April 15, 2025 13:53
@Timeless0911
Copy link
Contributor Author

Timeless0911 commented Apr 16, 2025

I think the bloated bundled size is due to Rspack doesn't allow concatenated module for CJS output?

@fi3ework In fact, if we set optimization.concatenateModules: false, the index.js is 1013.6 kB, which is much larger than 772.2 kB when concatenateModules is not turned on.

@Timeless0911
Copy link
Contributor Author

Timeless0911 commented Apr 16, 2025

After checking the snapshots, I found that the __nested_webpack_require_18_37__ variable is quite ugly.

The output of src/runtime/cssExtractHmr.ts is correct with __webpack_require__.
image

@chenjiahan The snapshots seems to show the result of cssExtractHmr.js file being re-bundled by Rspack which is renamed to prevent reference to the same runtime.

This renaming behavior found some edge cases, but it should be in line with expectations in this test case and needs to be confirmed again. @JSerFeng cc

@chenjiahan
Copy link
Member

chenjiahan commented Apr 16, 2025

I'm not saying Rslib is built incorrectly, just that it's not easy to read.

In an Rspack application, cssExtractHmr.js is always re-bundled, so the generated code that users see will be __nested_webpack_require_18_37__

@Timeless0911 Timeless0911 mentioned this pull request Apr 16, 2025
Merged
2 tasks
@Timeless0911
Copy link
Contributor Author

Timeless0911 commented Apr 16, 2025

Maybe we should use scripts/prepare-container-runtime.js (or some other methods) to transform src/runtime/cssExtractHmr.ts to improve the generated code.

We can transform via SWC Compiler API provided by Rspack in the near future.

@Timeless0911 Timeless0911 mentioned this pull request Apr 28, 2025
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chenjiahan chenjiahan chenjiahan approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Timeless0911 @fi3ework @chenjiahan