okikio / bundlejs

An online tool to quickly bundle & minify your projects, while viewing the compressed gzip/brotli bundle size, all running locally on your browser.
https://bundlejs.com
MIT License
751 stars 13 forks source link

Exclude `await import('[...'])` in bundle size? #66

Closed KATT closed 8 months ago

KATT commented 8 months ago

Hey! Thanks for a great tool, I use it often.

I recently got a report on my library where the bundle was reported as having been increased whereas a library is dynamically imported using await import('[...]') in certain code paths (in this case only sometimes and only on the server)

My request is: would it be possible to support the stripping of dynamic imports as part of the bundle size? Or perhaps I'm missing a config option to enable this?

Examples

Should A, B, C be considered equal here? Currently, they all end up being roughly the same size whereas I'd like A and B to be treated differently.

A) Normal import

Clearly exports all of react-dom/server - should be counted in it's entirety

export * from 'react-dom/server';

https://bundlejs.com/?q=react-dom%2Fserver&treeshake=%5B*%5D&config=%7B%22analysis%22%3Atrue%7D

B) dynamic import in a function

๐Ÿ‘‹ I'd like the react-dom-import to be ignored here

export async function importReact() {
  const reactDomServer = await import('react-dom/server');
}

https://bundlejs.com/?text=%22export+async+function+importReact%28%29+%7B%5Cn++const+reactDomServer+%3D+await+import%28%27react-dom%2Fserver%27%29%3B%5Cn%7D%22&config=%7B%22analysis%22%3Atrue%7D

C) dynamic import that is actually guaranteed to be called

Unsure what's the best approach here


export async function importReact() {
return await import('react-dom/server');
}

export const reactPromise = importReact()



https://bundlejs.com/?text=%22export+async+function+importReact%28%29+%7B%5Cn++return+await+import%28%27react-dom%2Fserver%27%29%3B%5Cn%7D%5Cn%5Cnexport+const+reactPromise+%3D+importReact%28%29%22&config=%7B%22analysis%22%3Atrue%7D
okikio commented 8 months ago

Sorry, for the late response, the solution is actually rather easy you'd setup a esbuild config external like so...

{
  // ...
  "esbuild": {
    // ...
    "external": ["react-dom/server"],
  }
}

https://bundlejs.com/?text="export+async+function+importReact()+{\n++const+reactDomServer+=+await+import('react-dom/server');\n}"&analysis&config={esbuild:{external:["react-dom/server"]}}

bundle

okikio commented 8 months ago

BTW, great work with tRPC ๐Ÿ‘๐Ÿฝ