Other misc tweaks to discuss

[kurtextrem]

Pure Annotation

https://www.npmjs.com/package/babel-plugin-annotate-pure-calls This helps reducing the bundle size, however it could break your code. I'd say we should mention it. Plus: https://github.com/kurtextrem/Improved-for-Instagram/blob/master/pure-plugin.js - this annotates classes. We can take it even further: https://www.npmjs.com/package/side-effects-safe

babel-plugin-closure-elimination

https://github.com/codemix/babel-plugin-closure-elimination - I haven't benched it, however it makes sense as it reduces function/obj allocation and small functions are also inlined easily. (probably makes the bundle bigger though)

Prepack

https://prepack.io / https://github.com/gajus/prepack-webpack-plugin speaks for itself :)

etc

https://npmjs.com/package/duplicate-package-checker-webpack-plugin

[iamakulov]

https://www.npmjs.com/package/babel-plugin-annotate-pure-calls This helps to reduce the bundle size, however, it could break your code. I'd say we should mention it.

• I think this one is too complex. The developer must understand what #__PURE__ does, when it’s helpful and how it might break the code.

• And too risky. If you don’t fully understand what this plugin and #__PURE__ do, enabling it is like a time bomb. Even if it doesn’t break your app right now, you must be extremely cautious when adding any top-level side effects. And if it breaks your app in the future, debugging this (if you forget about this plugin or don’t fully understand it) will be a hell.

Basically, I believe, recommending this plugin puts the developers at too much risk for not that much gain. I won’t do this.

(The plugin might be useful for library authors, as it mentions in the README – but I think we target app developers here.)

Plus: https://github.com/kurtextrem/Improved-for-Instagram/blob/master/pure-plugin.js - this annotates classes.

AFAIK Babel 7 does this annotation for classes too. Or is this a different one?

We can take it even further: https://www.npmjs.com/package/side-effects-safe

This sounds cool! There’re too few downloads though – I’m not sure it’s fully safe :–(

Have you used this in production (or heard of anyone using it)?

---

https://github.com/codemix/babel-plugin-closure-elimination - I haven't benched it, however it makes sense as it reduces function/obj allocation and small functions are also inlined easily. (probably makes the bundle bigger though)

Would love to see a benchmark here. Generally, I’d prefer bundle size to runtime performance:

1. The network is way-way slower than the processor
2. In this repo, we focus on bundle size

---

https://prepack.io / https://github.com/gajus/prepack-webpack-plugin speaks for itself :)

The plugin is not compatible with webpack 4 :–(

As to Prepack – do you know how safe it is? Last time I checked, it wasn’t production-ready yet.

---

https://npmjs.com/package/duplicate-package-checker-webpack-plugin

Cool thing! Probably out of scope for this repo though – as it doesn’t immediately make your bundle smaller.

[kurtextrem]

Basically, I believe, recommending this plugin puts the developers at too much risk for not that much gain. I won’t do this.

Sounds reasonable.

---

AFAIK Babel 7 does this annotation for classes too. Or is this a different one?

Do you have a source for that? I picked the code from a gist some when, don't know if that changed. Let's look it up :)

Have you used this in production (or heard of anyone using it)?

I use it in my Chrome extensions, but those are fairly easy to test and the target is Chrome only. So can't really tell you much. Just for the sake of completion, the plugin links to: https://github.com/wrwrwr/babel-remove-pure-exps and https://github.com/wrwrwr/babel-remove-props, which I might test next.

In this repo, we focus on bundle size

True, so we keep this plugin in this issue only :)

---

The plugin is not compatible with webpack 4 :–(

Yup, unfortunate :/

As to Prepack – do you know how safe it is? Last time I checked, it wasn’t production-ready yet.

I'm not sure. Some options definitely aren't. However, they also have great plans: https://twitter.com/trueadm/status/991725785038942210 We could ask on Twitter.

[iamakulov]

Do you have a source for that? I picked the code from a gist some when, don't know if that changed. Let's look it up :)

Just tested with @babel/[email protected] and @babel/[email protected]:

---

As to Prepack – do you know how safe it is? Last time I checked, it wasn’t production-ready yet.

I'm not sure. Some options definitely aren't.

Dan Abramov also mentions that Prepack can’t be just enabled like Babel or UglifyJS: https://gist.github.com/gaearon/d85dccba72b809f56a9553972e5c33c4#before-we-dive-in-. So it seems like Prepack is not safe enough for mentioning it right now. In the future, when Prepack becomes more stable and gains more React-specific optimizations, we might mention it under the “React” section.

[kurtextrem]

I guess we should leave this open until we can mention Prepack - some experimentation friendly developers might also stumble over the other stuff in meanwhile :)

[kurtextrem]

Another thing to discuss:

https://medium.com/@okcdz/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

It shaves off 7 kB (90 kB -> 83 kB) in my bundle. Worth to mention I'd say. What do you think @iamakulov?

[iamakulov]

Another thing to discuss: https://medium.com/@okcdz/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

That‘s an interesting plugin :)

• This is probably out of topic for this specific repo (doesn’t help with any specific library), but something we might want to add to https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size
• Just tried this plugin on my production project, and there were exceptions during the build:

Summing up: I think let’s wait for a couple of months until it stabilizes and gains popularity, and then we can add it into the article (or another place if we find it). Thanks for suggesting this!