Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

The CJS output is a bit large when building the library #442

zhangfisher started this conversation in General
Discussion options

When building AutoStore, the output sizes of the cjs and esm products were compared to those generated by tsup. The results are as follows:

tsup Output:

CLI tsup v8.3.0
CLI Target: es2022
ESM dist\index.js 57.42 KB
ESM dist\index.js.map 369.29 KB
ESM ⚡️ Build success in 20273ms
CJS dist\index.cjs 58.74 KB
CJS dist\index.cjs.map 369.33 KB
CJS ⚡️ Build success in 20274ms
DTS ⚡️ Build success in 29207ms
DTS dist\index.d.ts 24.71 KB
DTS dist\index.d.cts 24.71 KB

The sizes of the cjs and esm outputs are similar, but there is a significant difference in the output sizes of rslib:

rslib Output:

pnpm rslib build
 Rslib v0.0.18
start Generating DTS... (cjs)
start Generating DTS... (esm)
ready Built in 4.01 s (esm)
ready Built in 3.92 s (cjs)
 File (esm) Size Gzip 
 dist\index.js 53.8 kB 16.2 kB
 Total: 53.8 kB (gzip: 16.2 kB)
 -----
 File (cjs) Size Gzip 
 dist\index.cjs 65.0 kB 17.6 kB
 Total: 65.0 kB (gzip: 17.6 kB)
error Failed to emit declaration files. (esm)
error E:/Work/Code/sources/autostore/packages/react/tsconfig.json - error TS5055: Cannot write file './dist/tsup.config.d.ts' because it would overwrite the input file.
 Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
error DTS generation failed
 at emitDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
 at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
 at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:133:9)
error Failed to emit declaration files. (cjs)
error E:/Work/Code/sources/autostore/packages/react/tsconfig.json - error TS5055: Cannot write file './dist/tsup.config.d.ts' because it would overwrite the input file.
 Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
error DTS generation failed
 at emitDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
 at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
 at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:133:9)
error Failed to build.
error Error occurred in esm DTS generation
 at handler (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/index.js:61:57)
 at Object.call (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2331:36)
 at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 at async onDone (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2378:30)
 at async Object.fn (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2362:76)
  • The sizes of the cjs and esm outputs from rslib are 65 KB and 53 KB, respectively, with the cjs output being nearly 9.8 KB larger than the esm output.
  • Additionally, if tsup is run before rslib, the second build attempt will result in an error.
  • The build speed does not seem to improve significantly compared to tsup.

You can find the reproducible project here.

在构建AutoStore时,输出cjs和esm产物,对比tsup的产物大小对比如下:

tsup产物如下:

CLI tsup v8.3.0
CLI Target: es2022
ESM dist\index.js 57.42 KB
ESM dist\index.js.map 369.29 KB
ESM ⚡️ Build success in 20273ms
CJS dist\index.cjs 58.74 KB
CJS dist\index.cjs.map 369.33 KB
CJS ⚡️ Build success in 20274ms
DTS ⚡️ Build success in 29207ms
DTS dist\index.d.ts 24.71 KB
DTS dist\index.d.cts 24.71 KB

cjs和esm产物大小基本一致,但是rslib的产物则差距较大:

rslib产物如下:

pnpm rslib build
 Rslib v0.0.18
start Generating DTS... (cjs)
start Generating DTS... (esm)
ready Built in 4.01 s (esm)
ready Built in 3.92 s (cjs)
 File (esm) Size Gzip 
 dist\index.js 53.8 kB 16.2 kB
 Total: 53.8 kB (gzip: 16.2 kB)
 -----
 File (cjs) Size Gzip 
 dist\index.cjs 65.0 kB 17.6 kB
 Total: 65.0 kB (gzip: 17.6 kB)
error Failed to emit declaration files. (esm)
error E:/Work/Code/sources/autostore/packages/react/tsconfig.json - error TS5055: Cannot write file './dist/tsup.config.d.ts' because it would overwrite input file.
 Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
error DTS generation failed
 at emitDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
 at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
 at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:133:9)
error Failed to emit declaration files. (cjs)
error E:/Work/Code/sources/autostore/packages/react/tsconfig.json - error TS5055: Cannot write file './dist/tsup.config.d.ts' because it would overwrite input file.
 Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
error DTS generation failed
 at emitDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
 at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
 at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/dts.js:133:9)
error Failed to build.
error Error occurred in esm DTS generation
 at handler (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/rsbuild-plugin-dts@0.0.18_@microsoft+api-extractor@7.39.1_@types+node@22.5.5__@rsbuild+core@1.1.2_typescript@5.6.2/node_modules/rsbuild-plugin-dts/dist/index.js:61:57)
 at Object.call (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2331:36)
 at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 at async onDone (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2378:30)
 at async Object.fn (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@rsbuild+core@1.1.2/node_modules/@rsbuild/core/dist/index.js:2362:76)
  • rslib的cjs和esm产物分别是65K和53K,cjs产物比esm大了近9.8K。
  • 另外在先调用tsup构建后再调用rslib构建时,第二次调用时会构建出错。
  • 感官上构建速度好多象对比tsup并没有提升的样子

以上重现工程在这里

You must be logged in to vote

Replies: 3 comments 3 replies

Comment options

另外在先调用tsup构建后再调用rslib构建时,第二次调用时会构建出错。

Can not reproduce it. And you should specify rootDir: src to let Typescript generate correct bundleless DTS.

image

感官上构建速度好多象对比tsup并没有提升的样子

Excluding the time consumed by DTS files generation:

  • esm build time: tsup 0.433s -> Rslib 0.08s

  • cjs build time: tsup 0.433s -> Rslib 0.07s

The time consumed by DTS files generation is just the time consumed by tsc execution, which takes a very long time, so the overall build time consumption is not significantly improved. In addition, since the generated DTS file of tsup is bundle DTS implemented by rollup-plugin-dts, the structure and time consumption is different from which of Rslib do that generate bundleless DTS by Typescirpt compiler API. And we are exploring a fast type generation solution based on isolated declarations.
You must be logged in to vote
1 reply
Comment options

rslib的cjs和esm产物分别是65K和53K,cjs产物比esm大了近9.8K。

The CJS bundle is generated by Rspack which is as same as webpack, we will try to optimize it from webpack in the future.
Comment options

之所以感觉没有速度上的提升,主要是在ready阶段

start Generating DTS... (esm)
start Generating DTS... (cjs)
ready Built in 19.7 s (esm)
ready Built in 19.8 s (cjs)
 File (esm) Size Gzip
 dist\index.js 53.8 kB 16.2 kB
 Total: 53.8 kB (gzip: 16.2 kB)
 -----
 File (cjs) Size Gzip
 dist\index.cjs 65.0 kB 17.6 kB
 Total: 65.0 kB (gzip: 17.6 kB)
ready DTS generated in 23.1 s (esm)
ready DTS generated in 23.1 s (cjs)
You must be logged in to vote
1 reply
Comment options

image

You can see my screenshot to see the execution time in my pc. It looks like your computer is running very slow. What is your operating environment? Run npx envinfo --system --browsers --npmPackages '@rslib/*' to see it.
Comment options 

packageManager: pnpm
 System:
 OS: Windows 10 10.0.19044
 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
 Memory: 1.63 GB / 15.84 GB
 Browsers:
 Chrome: 122.0.6261.112
 Edge: Spartan (44.19041.1266.0), Chromium (119.0.2151.72)
 Internet Explorer: 11.0.19041.1566

反复多次执行


 Rslib v0.0.18
ready Built in 0.74 s (esm)
ready Built in 0.69 s (cjs)
 File (esm) Size Gzip 
 dist\index.js 53.9 kB 16.2 kB
 Total: 53.9 kB (gzip: 16.2 kB)
 -----
 File (cjs) Size Gzip 
 dist\index.cjs 65.1 kB 17.7 kB
 Total: 65.1 kB (gzip: 17.7 kB)
start Generating DTS... (esm)
start Generating DTS... (cjs)
ready DTS generated in 7.69 s (cjs)
ready DTS generated in 7.72 s (esm)
You must be logged in to vote
1 reply
Comment options

Your DTS file generation time is also very long, which seems to be caused by the performance gap of your computer hardware level.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /