Not reduce bundle size as expected

There is a project that has been written in Typescript. bundle size with babel/preset-env is 101.29KB minified & gzipped also bundle size with babel/preset-modules is 100.27 KB minified & gzipped. here is a repository that you can check: sample-react-redux-typescript I removed polyfills for a better comparison of bundle size. you can run yarn analysis for viewing bundle size. node version: v12.12.0

[developit]

@alireza-mh Code imported from node_modules is ES5, regardless of whether it uses ES Modules. This is a common misconception - libraries like react-router-dom and redux don’t actually provide ES2015, they just publish ES5 in a few different module formats. As such, they are entirely unaffected by this preset (whether you run them through Babel or not).

Regarding your repo, I can clarify something: the code isn’t using async/await or Tagged Templates, which are the two syntax features that benefit most from this preset. The code is essentially written in ES2015 (classes, arrow functions), whereas this preset seeks to enable ES2017. It’s likely the only output changes between preset-modules and preset-env for you are arrow functions being used more consistently and slightly worse JSX output (#4 will address).

In general we don’t “modernize” code written in older syntax**, which means optimizations like preset-modules have no effect on that code. In order to see size gains from preset-modules, code needs to be written in ~ES2017 - the more the better.

** I have actually been looking into this space and am working on something.

[midudev]

@alireza-mh the problem is that what you’re bundling is, probably, already compiled. For example, react and react-dom are already transpiled. Almost everything that’s already in your node_modules is, in fact, already transpiled. That’s why you’re able to ignore them in your webpack.config.js.

So, your improvement of 1KB is from your codebase. Which, is not bad at all, in terms that your app is noticeable small.