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
8
votes
1 answer

Webpack 2 Not Tree Shaking D3.js Properly

Webpack will include all of d3.js in the bundle when doing import { select } from 'd3' as seen in the following bundle visualization. The problem can be solved by doing import { select } from 'd3-selection' but this defeats the purpose of automatic…
Nathan Liebrecht
  • 93
  • 6
8
votes
1 answer

How to use tree-shaking with webpack 2 and typescript and angular 2?

I have set up webpack 2 with angular and mostly it seems to work. It does not seem though that it does the tree-shaking, since I have an app that does almost nothing, and the vendor.js is still 800+ KB. It seems there is very little information…
Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
7
votes
2 answers

Webpack Tree Shaking not working when importing from a file that has other imports

I created this example module.js import moment from "moment"; export function square(x) { return x * x; } export function cube(x) { return moment.format(x * x * x); } main.js import {square} from…
Panayiotis Panayiotou
  • 101
  • 1
  • 4
7
votes
2 answers

Tree shaking for Angular 10 shook out AsyncPipe when using sideEffects: false

Tree shaking in Angular 10 is 'shaking' out my AsyncPipe. The release notes blog entry for Angular 10 introduces a new --strict mode for ng new: One thing this does is: Configures your app as side-effect free to enable more advanced…
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
7
votes
0 answers

import * as React tree shaking?

import * as React from ‘react’ I’m using flow types and importing React like this is recommended. My question is does this have tree shaking implications? Is this importing more than I need and increasing my js file sizes?
GetSwifty
  • 347
  • 2
  • 11
7
votes
0 answers

webpack tree shaking and split chunks together

We are using webpack splitChunks for bundling shared packages, now we did tree shake on our modules. (Our icons, ui components, hooks and helpers are npm package). The problem is, our packages are fully tree shakable, but with splitChunks all of…
SayJeyHi
  • 1,559
  • 4
  • 19
  • 39
7
votes
1 answer

Why do material-ui modules show in both node_modules and src after Webpack 4 tree shaking?

The Cloud Native Interactive Landscape is an open-source, browser-only application that loads a static React app for visualizing the cloud native ecosystem: Try the app View source You can interactively view the results of webpack-bundle-analyzer…
Dan Kohn
  • 33,811
  • 9
  • 84
  • 100
6
votes
0 answers

Unused modules not treeshaken for react-native-web. Bundle size remains huge

We have a react native application with react-native-web used for the web bundle. The problem is the react-native-web bundle is 827kb in the final bundle and is the major part of the build. We are not using all the modules in the package yet the…
Vishnu Mohan
  • 111
  • 5
6
votes
2 answers

Reduce Lodash in bundle using 'lodash-es' and create-react-app

I am a novice when it comes to webpack, and I have always relied on the out-of-the-box capabilities of tools like create-react-app when it comes to build processing. However, I am just now starting to "try" and get more into things - so please…
HJordan35
  • 160
  • 2
  • 9
6
votes
1 answer

How to remove dead code in Create React App

I have a create-react-app project, and I am working on reducing my bundled JS file size. About half of my bundle size is coming from a dependency called MDBReact (a react component library), and majority of it is not being used. I am trying to find…
Trevor Johnson
  • 874
  • 5
  • 19
6
votes
1 answer

Does Webpack tree shaking with dead code elimination work on node_modules?

Considering this Webpack 3.8.1 config. // common module.exports = { context: path.resolve(__dirname, './src'), entry: [ 'whatwg-fetch', './index' ], output: { path:…
B.Gen.Jack.O.Neill
  • 8,169
  • 12
  • 51
  • 79
6
votes
1 answer

Does react-native's bundler optimize with tree shaking?

I recently saw a suggestion about deep requiring in a module - Note: If you don't want the ReactART based components and it's dependencies, do a deep require instead: import ProgressBar from 'react-native-progress/Bar';. Based on my knowledge -…
prithsharma
  • 111
  • 6
5
votes
2 answers

Tree shaking does not work in vite library mode

I am building a library with vite library mode, the problem is the bundler is not tree shakable. There are some related topics here, here and maybe here also. So, anyone has experience with this?
ShinaBR2
  • 2,519
  • 2
  • 14
  • 26
5
votes
1 answer

TreeShaking with RxJS 7.x and WebPack 5

I would like to treeshake rxjs in my TypeScript application that is bundled via WebPack: rxjs@7.5.7 webpack@5.74.0 According to https://rxjs.dev/guide/installation I would have to use the ES2015 exports of rxjs, but I cannot find out how to do…
Carsten
  • 468
  • 4
  • 16
5
votes
1 answer

Implement tree-shaking in typescript

I'm building a re-usable telemetry library using TypeScript and OpenTelemetry. I'm trying to see how I can implement tree-shaking such that consumer can import only the modules they need and not everything and so they can reduce the overall bundle…
VJAI
  • 32,167
  • 23
  • 102
  • 164
1 2
3
…
15 16