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

webpack tree shaking with Lazy loading question

all, I'm new to Webpack. Currently, I'm facing a question with webpack tree shaking. In CommonJS, webpack cannot do tree shaking because of the require syntax. For example, a program can import packages from below ways but tree shaking cannot be…
leo0807
  • 941
  • 1
  • 8
  • 21
2
votes
0 answers

Tree shaking not working for the react component library using named imports

Our company projects count is growing, so we decided to move our ui kit to a separate private npm package. For building kit before publishing we decided to use rollup. The file structure for ui kit is quite standard we've: src - Components …
kyivcoder
  • 71
  • 3
2
votes
1 answer

Ant Design Tree shaking with CRA

is there any way to do "tree shaking" of Antd with React 16.13 (CRA) i tried this tutorial https://www.npmjs.com/package/babel-plugin-import in package.json "plugins": [ ["import", { "libraryName": "antd", "style": true}, "antd"] ] but after…
Nick1R11
  • 51
  • 1
  • 1
  • 7
2
votes
1 answer

How to tell Webpack not to read (exclude) unreachable files by tree shaking?

Seems like the tree shaking feature of Webpack helps to remove unused code from the bundle. However, Webpack does read these unreadable files. How do I tell Webpack not to read them? Here is an example: index.js import { bar } from…
David
  • 2,528
  • 1
  • 23
  • 29
2
votes
2 answers

in angular, Circular dependency when using providedIn and forRoot

I am developing an angular library. it has an internal service. which is defined like below. Used providedIn to be tree-shakable. and didn't use providedIn:'root' because its internal and just used in the module scope. @Injectable({ providedIn:…
Stef
  • 203
  • 2
  • 9
2
votes
0 answers

How can I define a tree-shakable provider for a concrete implementation at the application-level for a library-level interface in Angular 6+?

We are using Angular 7 currently. I've read through Angular's guide on dependency injection and creating tree-shakable providers. I've read a dozen Q&A's and blog posts about defining InjectionTokens or using abstract classes as tokens for providing…
crush
  • 16,713
  • 9
  • 59
  • 100
2
votes
1 answer

Is it possible to tree-shake module imports in live-served storybook?

I use Storybook with CRA preset in my project and run Storybook locally. I would like to use namespace imports in my storybook for better developer experience: // this is more convenient import { ArrowForward, Star } from '@material-ui/icons'; //…
Michal Kurz
  • 1,592
  • 13
  • 41
2
votes
1 answer

Question about tree-shaking / side-effects

I am trying to reduce bundle size of my nextjs project and I have some problem with tree shaking. Let me explain. I have a Flags.js file that export multiple flags component : export { default as FlagsCn } from './FlagsCn'; export { default as…
Lucien Peslier
  • 85
  • 2
  • 9
2
votes
0 answers

sideEffects in antd package.json not working as expected

We are using lib/styles/.css file from antd/lib in one our project files. In production build same is not shipped even when antd/package.json defines files at provided location to be sideEffects. We have tried to set sideEffects: true for all CSS…
Shivam Kantival
  • 21
  • 2
2
votes
1 answer

What is different between webpack production and development regarding tree shaking

in my webpack config when mode: "development" if I use import { pick, flattenDeep, chunk, fromPairs } from 'lodash-es'; or import _ from 'lodash-es'; the bundle size is the same at about 3.27 mb. but when I set mode to production in my webpack…
Jordan Klaers
  • 149
  • 11
2
votes
0 answers

Webpack 4 tree shaking and modules side effects

I'm trying to enhance my tree shaking skills with web pack: After reading documentation regarding webpack treeshaking, and in particular the side effect flag (that can be used in package.json to tell wether a lib has side effect free or not), I…
Clement
  • 3,860
  • 4
  • 24
  • 36
2
votes
0 answers

Avoiding duplicate scripts in bundles & tree shaking

So I'm just trying to go through the webpack-bundle-analyzer results looking for things that should be on a diet and understand the CLI build process more in depth (CLI v6.1.5, Angular v6.1.8) and improve our instance. I noticed that on just a…
Chris W.
  • 22,835
  • 3
  • 60
  • 94
2
votes
2 answers

Tree-shaking nested modules with webpack 4

Can't find out why tree-shaking is not working as I expected... My goal is to build a tree-shak-able library. index.js Header Button => ButtonGroups I have a webpack application that use this lib. When I import only the Header component, the…
poulpo
  • 71
  • 1
  • 5
2
votes
1 answer

How to optimize a library for tree-shaking via webpack 4

I'm trying to learn webpack 4 better and expirimenting with tree-shaking on a private library. I have a pretty minimal config const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin const CleanWebpackPlugin =…
Jason Carrick
  • 115
  • 1
  • 7
2
votes
1 answer

Is it possible to create a "weak export" in TypeScript

One unfortunate thing about testing modular code is that sometimes you have to export things just to test them. This pollutes your code, and it also makes nice features like "unused variable" flags on the compiler or linter less valuable - if you…
javajosh
  • 510
  • 5
  • 12
1 2 3
…
15 16