Feedback on difference with tsup

[belgattitude]

Bunchee looks an amazing project. Very easy to use.

You might be interested in some difference I've found out trying to migrate from tsup/esbuild

I've noticed a slightly bigger bundle (as measured by size limit webpack with brotli compression)

I'm interested to know if it would be possible to improve the tree-shaking capabilities

And also I was wondering if there's support for browserslist... esbuild support it, I guess swc too

If you want to try out the differences:

The example repo/branch: belgattitude/httpx#1527

cd packages/exception
# build with bunchee 5.5
# "yarn build-tsup" for comparison
yarn build 
# check individual imports with webpack (size-limit.cjs)
yarn check-size
# ecmascript 2020 conformance
yarn check-dist          

[huozhi]

Appreciate the great feedback! I think browserlist is a good feature to support.

For the tree-shaking issue, could elaborate a bit more what exactly not doing here?

[belgattitude]

About tree shaking

I've been doing a test to see the difference between the two outputs... If you check the latest PR you might have some ideas. For the moment idk cause they look incredibly similar.

You can always regenerate the dists

cd packages/exception
yarn install
yarn build
yarn build-tsup

The command I use to check for size-limits is

yarn check-size

It's based on https://github.com/ai/size-limit/ with latest webpack enabled. You'll find the current thresholds in the size-limit.cjs file. As an example

  {
    name: "ESM (only HttpNotFound exception)",
    path: ["dist/index.mjs"],
    import: "{ HttpNotFound }",
    limit: "425B",
  },

Don't know if I have the talent to dig deeper. But I'd be happy if if the PR helps.

belgattitude/httpx#1527

[belgattitude]

Something that migth be worthy: tsup/esbuil/rollup will group into chunks. That might explain. I remember an option in rollup splitting every file, but I doesn't come for free (disk space, dts...).

My intuition would say, it's not so much related to the chunks but should be a side effect somewhere that prevents webpack to tree-shake the current dist. Maybe some rollup magic might help

[belgattitude]

About browserslist

I tend to create a file .browserslistrc to not pollute the package.json

# Supported browsers
defaults
chrome >= 96
firefox >= 90
edge >= 91
safari >= 15
ios >= 15
opera >= 77

With tsup I use a plugin

import browserslistToEsbuild from 'browserslist-to-esbuild';
import { defineConfig } from 'tsup';

export default defineConfig((options) => {
  return {
    cjsInterop: false,
    clean: true,
    dts: true,
    entry: [
      'src/index.ts',
      'src/experimental/index.ts',
      'src/serializer/index.ts',
    ],
    bundle: true,
    format: ['esm', 'cjs'],
    minify: false,
    minifyIdentifiers: false,
    minifySyntax: false,
    minifyWhitespace: false,
    outExtension({ format }) {
      return {
        js: `.${format === 'cjs' ? 'cjs' : 'mjs'}`,
      };
    },
    // keepNames: true,
    platform: 'neutral',
    sourcemap: !options.watch,
    splitting: true,
    target: ['es2022', ...browserslistToEsbuild()],
    treeshake: true,
    outDir: './dist-tsup',
    tsconfig: './tsconfig.build.json',
  };
});

[huozhi]

Thanks for the details, sounds like you need codesplitting to ensure each file is small enough? Wonder are you loading it from CDN? cause if still want to bundle the library into a framework, the chunks probably doesn't matter anymore as the application bundler will handle it again, for instance using it in Next.js. But maybe it's a good option to have. I need more information about it to ensure I can add a proper feature to support.

[huozhi]

btw I support the browserslist in package.json in #587 , will that be enough for your case?

[huozhi]

Seems rollup doesn't have a good codesplitting support yet, I'll pause the codesplitting part yet when I found sth useful.

Curious why you need to do the size-limit check? if they're going to be bundled in webpack the chunk splitting could also be different. Or if it's CLI it also doesn't matter

[belgattitude]

Thank you so much, realised I haven’t replied.

The size limit cli actually import individual modules through webpack. Kind of simulation as I understood it.

I’m not totally sure if it’s reliable totally but as far as I tested it, seems it correspond to what I see in nextjs for example.

To be sure I should try a build with bunch and see how nextjs behave… haven’t found time yet to do so.

In my previous experience with rollup, there was option to emit individual files at the cost of having a larger install size (a file in minimum 4k on a classic file system). That helps the tree shaking abilities.

[huozhi]

Is your library targeting for server side or browser side?

[huozhi]

I noticed there's tree-shaking issue that didn't tree-shake a lot of code. Fixed it in 6.0.4 and published, I think it would solve some of your issues of size 🙏

[belgattitude]

Thanks you @huozhi

I just tried with latest 6.1.2... unfortunately it doesn't change. I think the tree shake option in rollup is only relevant when importing external code.

Sorry if I cannot spend time on this... Just letting you know the results 🙏

[huozhi]

Yea it still bundles into the same chunk I assume that's the main problem. And without having automatically chunk split the chunk the entry will still be overrized in your case. Might need to introduce some automatic chunk splitting strategy like esbuild does. Currently it only supports the shared module which is bit manual. I'll investigate that, thanks for the feedback.