Stack Overflow
Stack Overflow

Questions tagged [tree-shaking]

Tree shaking is a modern dead code elimination algorithm for ECMAScript 2015.

Tree shaking is a modern dead code elimination algorithm for ECMAScript 2015.

239 questions
74
votes
4 answers

Angular CLI output - how to analyze bundle files

I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know which classes and functions have been actually put in the bundle after tree-shacking and all other…
Picci
  • 16,775
  • 13
  • 70
  • 113
29
votes
3 answers

What is Tree Shaking and Why Would I Need It?

I've started learning about Angular 2 and have come across this term "tree shaking" and I haven't been able to find any good explanation of it from a beginners' perspective. I have two questions here: What is tree shaking and why would I need it? …
TrevorBrooks
  • 3,590
  • 3
  • 31
  • 53
28
votes
2 answers

Barrel file and Tree Shaking

Here is an example repository that shows an example of the issue reported in this thread: https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md I'm trying to understand what's the effect of using a Barrel file to export functions…
Eux
  • 482
  • 7
  • 16
25
votes
2 answers

Angular2 (CLI) tree shaking removing dynamically created NgModule

I assume the question at Angular-cli tree-shaking exclude component from removal is very similar but I can't seem to get anything out of it. Essentially I have a dynamic component factory as described in How can I use/create dynamic template to…
Sebastian
  • 5,177
  • 4
  • 30
  • 47
23
votes
3 answers

Why webpack doesn't tree-shake the lodash when using "import * as _"?

I am learning about tree-shaking with a webpack 4/React application that uses Lodash. At first, my Lodash usage looked like this: import * as _ from "lodash"; _.random(... I soon learned, via the BundleAnalyzerPlugin, that the entirety of Lodash…
Jonathan.Brink
  • 23,757
  • 20
  • 73
  • 115
22
votes
1 answer

Is re-exporting modules harmful for tree-shaking?

I've come into an argument with my co-workers for which we can't seem to find an answer from any official source (MDN, webpack documentation, ...). My research hasn't yielded much either. There seems to be doubt even when it comes to importing as…
pbondoer
  • 538
  • 7
  • 15
19
votes
4 answers

How do you make a library truly tree-shakable with webpack?

I have a library of multiple react components, and I want to make the library tree-shakable so that when I import a component like import { Checkbox } from 'my-react-components' I don't import the whole bundle. My index.js looks like this export {…
Pontiacks
  • 1,118
  • 2
  • 13
  • 23
17
votes
2 answers

Angular Tree Shaking: How exactly does it work?

We are currently trying to optimize a complex angular application (performance & bundle size). We found that we have partially unused components, but we are not 100% sure about them. Anyway... The question we are currently asking is how exactly does…
Codehan25
  • 2,704
  • 10
  • 47
  • 94
17
votes
1 answer

Vuetify: Automatic treeshaking in Nuxt.js

I'm trying to get the automatic tree-shaking functionality provided by the Nuxt.js / Vuetify module working. In my nuxt.config.js I have: buildModules: [ ['@nuxtjs/vuetify', {treeShake: true}] ], However, I'm only using one or two components at…
sparkyspider
  • 13,195
  • 10
  • 89
  • 133
14
votes
2 answers

Why is my React component library not tree-shakable?

I have a React component library that I’m bundling with rollup. Then I’m consuming that library in an app setup with create-react-app which uses Webpack under the hood. I expect Webpack to tree-shake the component library. After building the app…
borisdiakur
  • 10,387
  • 7
  • 68
  • 100
14
votes
2 answers

Creating a tree shakable library with rollup

I am trying to create a component library wie rollup and Vue that can be tree shakable when others import it. My setup goes as follows: Relevant excerpt from package.json { "name": "red-components-with-rollup", "version": "1.0.0", …
Lukas
  • 9,752
  • 15
  • 76
  • 120
14
votes
2 answers

How to deal with side effects in tree shaking code?

I've been trying to learn how to write code that is tree shaking friendly, but have run into a problem with unavoidable side effects that I'm not sure how to deal with. In one of my modules, I access the global Audio constructor and use it to…
Steven Lambert
  • 5,571
  • 2
  • 29
  • 46
14
votes
1 answer

How to make a class-based custom element side-effect-free so webpack only bundles the explicitly imported components

I have a set of spec v1 custom elements which I'm using webpack 4 to bundle (and babel-loader to transpile). The components all look similar to this: export class CompDiv extends HTMLDivElement { constructor(...args) { const self =…
connexo
  • 53,704
  • 14
  • 91
  • 128
14
votes
3 answers

How to enable tree-shaking for a new Angular 4 project

I just created a new Angular 4 project with the CLI: ng new test The versions: @angular/cli: 1.0.0 node: 6.10.0 os: win32 x64 @angular/common: 4.0.1 @angular/compiler: 4.0.1 @angular/core: 4.0.1 @angular/forms: 4.0.1 @angular/http:…
Rico Suter
  • 11,548
  • 6
  • 67
  • 93
12
votes
1 answer

How to enable tree shaking for next.js?

Is there something to enable to have next.js perform tree-shaking/removal of dead code from dependencies? I've exported two objects like this: library.js export const foo = {foo:"foo"} export const bar = {bar:"bar"} And in my next.js app I do like…
Jon Lauridsen
  • 2,521
  • 5
  • 31
  • 38
1
2 3
…
15 16