Tree shaking is a modern dead code elimination algorithm for ECMAScript 2015.
Tree shaking is a modern dead code elimination algorithm for ECMAScript 2015.
Questions tagged [tree-shaking]
239 questions
5
votes
2 answers
Why does Webpack 5 include my unused TypeScript enum exports, even when Tree Shaking is enabled?
My TypeScript enums are defined like this, as in this file:
export enum HueColors {
"red" = "hsl(0, 100%, 50%)",
"orange" = "hsl(30, 100%, 50%)",
// ...
"pink" = "hsl(330, 100%, 50%)",
}
export enum RGBExtended { /* ... */ }
export…
lbragile
- 7,549
- 3
- 27
- 64
5
votes
1 answer
Are unreferenced default parameters automatically tree-shaken out by webpack?
Obligatory apologies if this has been asked before, but I've been
unable to find an answer online or in the webpack docs related to tree shaking.
How does tree-shaking work with default parameters? For context: I'm specifically concerned with how…
Billy Barry
- 187
- 6
5
votes
1 answer
What is the impact of importing from TypeScript barrel index files on Webpack v4 code-spliting / tree-shaking?
I am using TypeScript barrel index files (i.e. re-export pattern) to solve a needed cyclic dependency (i.e. circular imports) as explained in this article.
However, the article's author mentioned that this could impact code-splitting / tree-shaking…
geeko
- 2,649
- 4
- 32
- 59
5
votes
1 answer
Tree-shaking vs selective import in Flutter?
In Dart, we have the ability to selectively import parts of files or libraries with the show keyword...
import 'package:http/http.dart' show get;
...but Flutter makes tree-shaking.
Has the show keyword any benefit in Flutter or is it…
Norbert Merkli
- 85
- 1
- 7
5
votes
0 answers
How to make vue app tree-shake to get smaller files?
I have created an app using Vue CLI 3, I have been watching the build and it warned me there are large files:
$ vue-cli-service build --modern --mode production --dest dist --target app --dashboard
- Building legacy bundle for production...
…
Colton Scottie
- 807
- 1
- 8
- 22
5
votes
1 answer
Unable to tree shake React and dependencies if they are not being used
I am having trouble dead code eliminating unused React components.
I have created a sample project here - https://github.com/amithgeorge/webpack-issue-demo-1 ...
Three classes are defined,
class A is a react component using prop-types,
class B…
Amith George
- 5,806
- 2
- 35
- 53
5
votes
1 answer
Conditional require file in webpack
I want to bundle the files into my production build only if it is not for DEBUG;
So I've use webpack.DefinePlugin and set the variable DEBUG === true.
Also config webpack.UglifyJsPlugin with default options
And in the js file, I do like this:
const…
garyx
- 609
- 7
- 19
4
votes
0 answers
Module transpilation within a Next.js project with SWC
I have a project in Next.js and Typescript where I am trying to ensure code splitting and tree shaking works well for our purposes. I recently upgraded to Next.js 13.x and migrated from Babel to SWC.
We have a lot of modules exposed using barrel…
zkwsk
- 1,960
- 4
- 26
- 34
4
votes
1 answer
create environment variables based on the webpack entry point
I am splitting my react code with multiple entry points in webpack, these bundles are then loaded independently at completely different pages(HTML documents).
I have a lot of shared code, and most of my shared logic is under if-else check, so this…
Ashish
- 4,206
- 16
- 45
4
votes
0 answers
NextJS - Tree Shaking weird behaviour
I currently wanted to optimize handling modules on my application with the implemenation below described. I'm not sure why the page final bundle size increased. It only kept the same bundle size adding on the package.json the flag sideEffects:…
Ion
- 1,262
- 12
- 19
4
votes
1 answer
How prepare lib to be tree-shaking compatible?
I have a plugin created with Typescript and I need activate Tree-shaking in this plugin.
Is there any way to enable this feature without webpack?
João Eudes Lima
- 755
- 1
- 11
- 21
4
votes
2 answers
date-fns 2 - can't get tree-shaking to work
I'm having trouble figuring how date-fns v.2 tree-shaking feature works...
To help me with it, I've made a really simple project using:
date-fns 2.1.0
webpack 4.39.3
typescript 3.6.2
the test contains 2 files, one acting as the "library", the…
balexandre
- 73,608
- 45
- 233
- 342
4
votes
2 answers
What is the right way for better TreeShaking in webpack?
I was wondering, which one of the following two options is the right way for better Tree Shaking in webpack:
import { someFeature } from 'someModule' // Option 1
import { isEmpty } from 'lodash' // Example 1
Or,
import someFeature from…
UtkarshPramodGupta
- 7,486
- 7
- 30
- 54
4
votes
1 answer
Tree shaking: are unused functions included to a bundle?
Do modern bundlers like Webpack or Rollup shake out only unused modules or are they capable of removing unused functions (or variables, classes) inside a module as well?
// src.js
export function unused() {}
export function used() {}
//…
Nurbol Alpysbayev
- 19,522
- 3
- 54
- 89
4
votes
0 answers
Tree shaking in namespace module
There is a module that is used as a namespace (for testability reasons or else):
export function bar() {}
export function baz() {
this.bar();
}
export function qux() {}
This can be considered a bad practice because baz depends on the context…
Estus Flask
- 206,104
- 70
- 425
- 565