Tree shaking with webpack

1

Hi,
I’m using webpack to bundle my app(cannot move, as started off from CRA and would love to enjoy it) - The most popular bundler for the browser.

It seems like rescript generates es6 imports always with “import * …”
As far as i can tell this doesnt play well with webpack tree shaking.

Is rescript not tree-shaking friendly?

2 Likes
2

wildcard imports should be fine with tree shaking afaik. do you have an example when it doesn’t play well ?

1 Like
3

hmm, i’ll try to produce minimal example. but from what i read, webpack v4 doesnt support that.

4

I use ReScript with esbuild and when I switched from commonjs to es6 output my bundle size went from 1.9MB to 700KB. So at least esbuild can handle the imports ReScript uses for tree shaking.

3 Likes
5

Apparently if we specify Interface for module, all methods specified in the interface will be preserved in bundle even they are not in use.

type A = {
  let methodA: unit => unit
  let methodB: unit => unit
}
module A: A = {
  let methodA = () => ()
  let methodB = () => ()
}

// module B

A.methodA()

// bundle 
var methodA = ...
var methodB = ...

var A = {
 methodA,
 methodB,
}

A.methodA()

I’ll try to produce a minimal example, all above is still an assumption. But I had a real evidence that unused methods gone after I removed type definition for module.

6

I use rescript to generate commonjs code bacause the client and server are in the same codebase. There is another good way to minimize the bundled code size for first page loading, create a binding for dynamic import or just wait the Rescript v11.