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

zhangfisher · 2024-11-18T03:57:14Z

zhangfisher
Nov 18, 2024

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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
    at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
    at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
    at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
    at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/index.js:61:57)
    at Object.call (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@[email protected]/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/@[email protected]/node_modules/@rsbuild/core/dist/index.js:2378:30)
    at async Object.fn (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@[email protected]/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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
    at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
    at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/tsc.js:104:23)
    at async generateDts (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/dts.js:119:5)
    at async process.<anonymous> (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/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/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected]/node_modules/rsbuild-plugin-dts/dist/index.js:61:57)
    at Object.call (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@[email protected]/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/@[email protected]/node_modules/@rsbuild/core/dist/index.js:2378:30)
    at async Object.fn (file:///E:/Work/Code/sources/autostore/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.js:2362:76)

rslib的cjs和esm产物分别是65K和53K,cjs产物比esm大了近9.8K。
另外在先调用tsup构建后再调用rslib构建时，第二次调用时会构建出错。
感官上构建速度好多象对比tsup并没有提升的样子

以上重现工程在这里

Timeless0911 · 2024-11-18T04:28:38Z

Timeless0911
Nov 18, 2024
Maintainer

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

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

感官上构建速度好多象对比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.

1 reply

Timeless0911 Nov 18, 2024
Maintainer

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.

zhangfisher · 2024-11-18T07:15:16Z

zhangfisher
Nov 18, 2024
Author

之所以感觉没有速度上的提升，主要是在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)

1 reply

Timeless0911 Nov 18, 2024
Maintainer

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.

zhangfisher · 2024-11-18T07:27:51Z

zhangfisher
Nov 18, 2024
Author

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)

1 reply

Timeless0911 Nov 18, 2024
Maintainer

Your DTS file generation time is also very long, which seems to be caused by the performance gap of your computer hardware level.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

zhangfisher Nov 18, 2024

tsup Output:

rslib Output:

Replies: 3 comments · 3 replies

Uh oh!

Uh oh!

Timeless0911 Nov 18, 2024 Maintainer

Uh oh!

Timeless0911 Nov 18, 2024 Maintainer

Uh oh!

zhangfisher Nov 18, 2024 Author

Uh oh!

Uh oh!

Timeless0911 Nov 18, 2024 Maintainer

Uh oh!

Uh oh!

zhangfisher Nov 18, 2024 Author

Uh oh!

Timeless0911 Nov 18, 2024 Maintainer

zhangfisher
Nov 18, 2024

`tsup` Output:

`rslib` Output:

Replies: 3 comments 3 replies

Timeless0911
Nov 18, 2024
Maintainer

Timeless0911 Nov 18, 2024
Maintainer

zhangfisher
Nov 18, 2024
Author

Timeless0911 Nov 18, 2024
Maintainer

zhangfisher
Nov 18, 2024
Author

Timeless0911 Nov 18, 2024
Maintainer