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
3
votes
0 answers

Computing asset size from module sizes in webpack stats file

The stats.json file created by Webpack, is laid down such that, one or modules make up a chunk, and one or more chunks make up an asset. I am trying to compute the size of the asset by summing the sizes of the modules that (make up the chunks…
tubby
  • 2,074
  • 3
  • 33
  • 55
3
votes
2 answers

Avoid bringing code from imports of imports

I'm going through the exercise of making my webpack bundle smaller, and using webpack's bundle analyzer I saw that a really heavy package is being included in two different async chunks, even though it's only used once. After some digging in my…
3
votes
1 answer

Treeshaking webpack 4 does not apply due to @babel/preset-typescript

I use typescript and babel 7 in my react project (I remove tsloader beacause of babel 7 is now support TS) "@babel/preset-typescript": "^7.1.0", The problem is that treeshaking does not working when I use this preset. My babel config { "presets":…
coinhndp
  • 2,281
  • 9
  • 33
  • 64
3
votes
2 answers

Is it possible to import a component without a module

I am wanting to import a component into another component in Angular 4.4.6. This may end up being just a theoretical answer, which is fine. Just figured I would reach out here to see if anyone is doing this. I typically would just create a module…
BSchnitzel
  • 136
  • 2
  • 15
3
votes
1 answer

Only include needed polyfills with babel-polyfill

Is there a way to "tree shake" babel-polyfill, such that only the features I use are polyfilled? That is, if I never use String.padStart in my code, it's polyfill should not be included.
Birjolaxew
  • 807
  • 9
  • 25
3
votes
0 answers

Webpack 2.x tree shaking SVG icons with svg-sprite-loader

I'm bundling my project using webpack 2.x and most of the tree shaking parts work fine except that I have all svg images in exported svg file even if I'm not using them. SVG icons icons.js export { default as icon1 } from "./svg/icon1.svg"; export {…
Piotr W
  • 631
  • 7
  • 17
3
votes
0 answers

Angular 1.5 - Tree shaking with webpack & babel 6

I am using angular 1.5 with express in a very old project. now I need to revamp it (not rebuild). I was adding some webpack optimisations and transferring it to client side rendering angular application and separating server code with client…
Usman Tahir
  • 2,513
  • 4
  • 24
  • 38
2
votes
0 answers

Tree-shaking in Angular Lazy Modules

I can't really get why are services, that are marked with providedIn:root and that are used only in lazy-loaded modules aren't tree shaked. We don't have our lazy modules in initial bundle but have services that are used in them, why? And how does…
2
votes
0 answers

Is there any way to reduce the aws-sdk bundle sizes?

tried uploading to s3 in nextjs, is there any way to reduce the bundle size of the aws-sdk ? ...analyze/client.html upload code import S3 from 'aws-sdk/clients/s3'; export const uploadS3 = async (file: File) => { let type =…
bootoo
  • 23
  • 3
2
votes
0 answers

How to tell webpack to bundle using the ESM version of a dependency instead of the CJS

We use react-native-web-lottie which is distributed in two versions: dist: format CJS src: format ESM The beggining of their package.json looks like: "name": "react-native-web-lottie", "version": "1.4.4", "description": "React Native for Web…
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
2
votes
1 answer

How to perform tree shaking for lodash in a create-react-app project?

I need to perform tree-shaking to reduce bundle sizes where lodash and some other libraries are being used. I've converted all lodash imports like this: import {isEmpty} from "lodash"; But still bundle size is not getting reduced. To use plugins…
2
votes
0 answers

Why isn't webpack doing tree shaking when an imported library is not used?

just take this index.js: import _ from 'lodash'; import Swiper from 'swiper'; import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui"; console.log('from index'); //console.log(Swiper); console.log(Fancybox, Carousel,…
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
2
votes
0 answers

Tree-shaking development builds with webpack

I have a dependency that includes references to document that gets imported into a service worker. The documents are tree-shaken out in production mode. However, I actually need for my service worker to be fully functional also in development mode…
AntonOfTheWoods
  • 809
  • 13
  • 17
2
votes
0 answers

Bets Practices for Tree Shaking

I am working on migrating a very old code of Typescript (base on namespace structure). I am using some external modules like pixijs & have created some of my libs which can be imported by adding in package.json The issue is webpack (latest version)…
Rathore
  • 185
  • 8
2
votes
0 answers

Tree shaking not working with webpack if class contains more than one function

I'm using Webpack for a project (and I'm starting to regret that) and tree shaking is not working. I created a simple test library which I bundle using Rollup since Webpack cannot generate esm libraries (see here for more info about that:…
Cyril GC
  • 51
  • 5