Looking to implement the tree-shaking feature of Webpack for es6-modules or ESM (.ejs)? Here's a detailed breakdown:
My goal is to configure tree-shaking with Webpack v5 using babel-loader (adjustable from webpack.*.config.js), Babel v7 with @babel/preset-env (adjustable from babel.config.js), and TypeScript (adjustable from tsconfig.json). Here are the specifics:
Firstly, in tsconfig.json, I'm uncertain if changing "target": "es5" to "target": "es6" is necessary or if it even matters. My reasoning is that even with "es6" target, babel-loader will likely transpile it to "es5" based on browserslist in package.json. To enable tree-shaking in webpack, I assume I shouldn't transpile my code to "es5" too soon. Is my assumption accurate since babel-loader only reads browserslist and not tsconfig.json? Your insights are welcome.
Secondly, let's discuss babel. The "modules: false" option in babel.config.js instructs Babel not to transpile ESM imports for tree-shaking to function effectively. This ties back to the previous question: if "modules: false" is set, should babel-loader transpile ESM imports as well? Corrections and feedback are appreciated.
Lastly, regarding package.json and webpack.*.config.js, the "sideEffects: false" option is crucial for successful tree-shaking. It can be included in both package.json (as "side-effects") and the sideEffects field in webpack.*.config.js for babel-loader. I haven't tested which method works best. Any recommendations on choosing between the two options?
One important note: I exclusively utilize babel-loader without ts-loader (assuming this is correct). This approach was recommended in another forum answer as the most effective solution for a previous issue I encountered. If ts-loader is essential, please advise. Thank you.