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
4
votes
0 answers
include sourcemap in tree shaking for webpack
I have enabled tree-shaking on my module, but the source-map still includes the tree shaken code, even though the source does not. Is there any way to have webpack remove the tree shaken code from the sourcemap as well?
Ben
- 16,124
- 22
- 77
- 122
4
votes
0 answers
Do vendor entries go through tree shaking on Webpack?
I am tuning a project's webpack.config.js to optimize cache and and it's entry is something among those lines:
entry: {
main: "./index",
vendor: [
"react",
"react-dom",
"material-ui",
],
}
As material-ui uses ES6…
Victor Magalhães
- 178
- 1
- 8
4
votes
1 answer
Not able to tree shake lodash in a Webpack, TypeScript project
my goal is to tree shake lodash (amongst others) in my webpack.prod.js. Here are my configuration files. For completeness sake I will also include the webpack.dev.js, webpack.common.js, tsconfig.json and package.json:
webpack.common.js:
const path =…
チーズパン
- 2,752
- 8
- 42
- 63
3
votes
0 answers
JavaScript - Does the use of namespace imports have an effect on a module's treeshake-ability?
Original question:JavaScript - Does the use of namespace imports have an effect on a module's treeshake-ability?
Assume that we are using ES6 module system. According to the docs, when we use an * as Alias import, we are taking all of the exports…
user1261710
- 2,539
- 5
- 41
- 72
3
votes
0 answers
How to exclude a service from a bundle Angular
Imagine I have a setting in environment that could be true or false for different envs.
And I have an abstract service and two implementations:
@Injectable()
export abstract class TestCommonService {
protected abstract uniqueId: string;
}
export…
ectuser
- 131
- 1
- 1
- 11
3
votes
1 answer
Webpack5 does not seem to tree-shake unused exports
I set up a small project with the following files
- src/
- lib/
- lib1.ts
- export : func_lib1_1, func_lib1_2
- lib2.ts
- export : func_lib2_1, func_lib2_2
- pkg1/
- pkg1.ts
- import & use : func_lib1_1,…
Colisan
- 193
- 1
- 9
3
votes
0 answers
How to treeshake node_modules when building a nodejs backend project?
Could I treeshake node_modules when i build a nodejs backend project?
The node_modules is so big and there are too many small files in it,How can i treeshake it like the frontend do?
Too many small files in node_modules is not used in my project but…
radiorz
- 1,459
- 4
- 18
- 36
3
votes
1 answer
date-fns : tree-shaking doesn't seem to work
I use only a few of the functions and made sure I import them as recommended for tree-shaking in their documentation :
import { parseISO, formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale';
The code itself works fine, but…
Guillaume Prévost
- 303
- 4
- 13
3
votes
1 answer
Lodash: tree shaking
When I try to use lodash function as a specific import as shown below then it shows to be it loads only 14.7KB in size.
But when I try to use the import as a destructured object then it shows 69.6KB in size
Some articles say it works the same for…
Varun Sukheja
- 6,170
- 5
- 51
- 93
3
votes
1 answer
TypeScript class function as function VS variable which has better performace
Is it better using variables which define a function or using a function in the first place?
Furthermore, is there a difference for tree-shaking?
I have a lot of calculation (static) intensive helper classes and was wondering what the best…
G-wave
- 41
- 2
3
votes
0 answers
Tree Shaking in a CRA Monorepo
I have a monorepo yarn workspaces project that contains a create-react-app application and a UI library.
In my @app/ui packages, inside the src folder, I have a the following files:
country.ts
interface Country {
name: string;
alpha2: string;
…
Sammy
- 3,395
- 7
- 49
- 95
3
votes
0 answers
How to tree-shake Lodash and Mui imports in Storybook 5
I'm using Mui and Lodash in my CRA project with Storybook 5.
I successfully tree-shake both Mui and Lodash imports using babel-plugin-import in CRA, using the following .bablerc.js
module.exports = {
presets: ["react-app",…
Michal Kurz
- 1,592
- 13
- 41
3
votes
1 answer
How to use tree shaking for node modules with Webpack 5?
I want to boost my website performance. I recently see an error on unused javascript from lighthouse.
I checked the bundle and apparently those unused javascript are actually being used from other modules and node packages which I have been…
utopia
- 322
- 1
- 4
- 22
3
votes
2 answers
why does webpack 4 include the whole file for single named import?
Given the following two files :
//a.js
export const X = /*#__PURE__*/ "X";
const a = function () {
return "About a!";
};
a.foo = function () {
return "foo";
};
export default a;
and
//main.js
import { X } from "./a";
import { Y } from…
Jean
- 21,329
- 5
- 46
- 64
3
votes
0 answers
Marking statement as side-effect free for tree shaking
I have a package with ESM exports, with exported functions that have properties on them:
function Foo() { return 'Foo' }
Foo.displayName = 'Foo'
function Qux() { return 'Qux' }
Qux.displayName = 'Qux'
function Bar() { return 'Bar' + Qux()…
elado
- 8,510
- 9
- 51
- 60