Next.js: ~50% unused bytes in app.js with Chrome Dev Tools Coverage

[ghost]

Chrome Dev Tools code coverage utility

—

In production, of course.

—

Apart from the CSS (first time using styled-jsx and will need to improve shared styles design or use something like styletron) — have I misunderstood the automatic code splitting feature?

To give some context, I use a HOC to wrap each page, and I'm passing both methods and props that don't necessarily get used by each page. Additionally: I may have been careless here and there with some imports; I use re-base which currently imports all of Firebase (not necessary in my use case).

Am I possibly mixing webpack's automatic code splitting with static analysis and tree shaking a là rollup? If so,

1. Should Next perform tree-shaking and dead code elimination?

2. If not, do you have any suggestions regarding how to approach and solve this problem? Chrome Dev Tools coverage results cannot be exported trivially just yet and therefore I'm not sure how to identify unused code paths and imports with the minified output.

3. Would using something like webpack-rollup-loader be possible and make sense?

4. Can any of this lead to improvements to the already awesome way Next works?

Thanks!

[arunoda]

I assume this is because how webpack handles tree-shaking.
It needs ES2015 modules. I hope React doesn't provide that and that's why this is.
But I would like to experiment here. Any ideas/improvements welcome.

[ghost]

Possibly related to webpack#2867?

[sedubois]

Linked from that thread, here is apparently a utility to test if tree shaking happens properly in Webpack:
https://github.com/halt-hammerzeit/es6-tree-shaking-test