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
12
votes
1 answer
how to config lodash tree shaking in vite
Now, I'm using Vite2.x build my project
with 'rollup-plugin-visualizer', I found it build entire lodash package in
so, how to config the vite2.x to reduce the lodash package size
Heaven
- 133
- 1
- 5
12
votes
1 answer
Webpack not acting on sideEffects for css files
I have a javascript module that imports a CSS file. The CSS is included in the build in webpack 'development' mode, but not in 'production' mode. This will be because treeshaking sees the CSS file as not having any side effects. The recommended…
Nigel
- 585
- 1
- 5
- 20
12
votes
1 answer
Webpack 3, Babel and Tree shaking not working
I'm trying to find a way to tree-shake my modules and use Babel with Webpack.
If I take the example code from the webpack documentation (https://webpack.js.org/guides/tree-shaking/) and run it, the modules/functions/other exports that are not used…
Milanzor
- 1,920
- 14
- 22
11
votes
5 answers
Angular tree shaking not stripping dev code, what things should I look for?
I'm using the latest versions of all Angular-related packages (so Angular 10).
I want to add some code to a component, but I only want this code to exist in dev, never in a production build. It needs to be completely stripped in prod builds. I found…
vaindil
- 7,536
- 21
- 68
- 127
11
votes
1 answer
Code-splitting separate exports from a package to different bundles
I have a Gatsby site that consumes a number of packages. One of those packages is published from our monorepo: @example/forms. That package contains a number of named exports, one for each form component that we use on our site. There are quite a…
Undistraction
- 42,754
- 56
- 195
- 331
11
votes
1 answer
Webpack tree shaking still bundles unused exports
I am trying to test out Webpack's tree shaking feature, but it does not appear to be working.
Here are my files:
index.ts
import { good } from './exports';
console.log(good);
exports.ts
export const good = 'good';
export const secret =…
user3670473
- 353
- 3
- 10
11
votes
1 answer
Using Rollup for a React Component Library
I am beginning to learn a bit about bundling as I am working on updating a small, internal React component library which uses Rollup.
Current State
Right now, all of the components are being bundled down into one index.js files. And whenever I…
Yuschick
- 2,642
- 7
- 32
- 45
11
votes
2 answers
Webpack import * messes tree shaking?
I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I…
Noitidart
- 35,443
- 37
- 154
- 323
10
votes
2 answers
Specify the webpack "mainFields" on a case by case basis
Webpack has a resolve.mainFields configuration: https://webpack.js.org/configuration/resolve/#resolvemainfields
This allows control over what package.json field should be used as an entrypoint.
I have an app that pulls in dozens of different 3rd…
Sasha K.
- 287
- 2
- 8
10
votes
2 answers
How to properly do tree shaking to reduce bundle size and separate entry point for each cloud function
I am using Google Firebase Cloud Functions with TypeScript, and I found out that even though each function is deployed separately, they all share the same bundles and dependencies, even if some functions do not use them nor import them.
In my case,…
Joon
- 9,346
- 8
- 48
- 75
10
votes
2 answers
Tree-shaking with rollup
I have a project in which I bundle a components library using Rollup (generating a bundle.esm.js file). These components are then used in another project, that generates web pages which use these components - each page is using different…
Luoruize
- 579
- 2
- 7
- 25
10
votes
1 answer
Tree shaking not working - webpack 4 and uglifyjs-webpack-plugin
I have tried adding UglifyJSPlugin to a webpack 4 project, in accordance with the webpack docs, and I'm still seeing dead code and even comments in my bundle which leads me to think that my uglify plugin config isn't being used.
Link to project
The…
ItsGeorge
- 2,060
- 3
- 17
- 33
9
votes
1 answer
Can Webpack tree-shaking remove unused babel-polyfills?
I try to make webpack tree-shaking remove unused babel-polyfill.
index.js file contains:
import 'babel-polyfill'
const add4 = n => n + 4
const add5 = n => n + 5
add4(6)
console.log('boom', add4(4))
In this file no code require any es2015+…
François Romain
- 13,617
- 17
- 89
- 123
9
votes
2 answers
how to confirm if tree shaking is working with Webpack 2?
I just finished updating my react app from webpack 1 to webpack 2. However, My bundle size increased by ~30Kb. I was hoping the bundle size would decrease , How can i confirm that tree shaking worked. And why the increase?
jasan
- 11,475
- 22
- 57
- 97
8
votes
2 answers
Webpack including unused exports in final bundle (not tree shaking)
I have a setup where a library's index.js (main entry point) exports everything in the lib... so its setup like this:
export * from "./mod1"
export * from "./mod2"
// etc...
(take a look)
When I import 1 of the exported libraries from that entry…
Paul T.
- 608
- 1
- 6
- 11