256 questions
0
votes
1
answer
71
views
How to use composable correctly - tree shaking
I'm learning about optimization and I've found that either I've misunderstood something or every article about Vue and the examples are basically wrong.
It's about bundle size and tree shaking.
When I ...
- 244
0
votes
0
answers
26
views
webpack tree shaking not working in some case
When I tried tree shaking with webpack, I found that sometimes it didn't work properly.
I want to known why tree shaking not work in first one?
// utils.js
var sum = (a, b) => {
return a + b;
};
...
- 3
0
votes
1
answer
50
views
Produce a tree-shakeable ESM library with Webpack
I have a TypeScript CJS library (common-fe), that I use in a Next.js app (app-fe).
I started working on a v2, with ESM output instead, hoping that the library was completely modular and tree-shakeable....
- 380
0
votes
0
answers
172
views
How to tree shake unused SCSS classes in Astro
I'm using Bootstrap in Astro, importing the modules I need and customising them in SCSS. But I have noticed that the site is noticeably slow due to Bootstrap's bloat.
How can I tree shake the unused ...
user25478432
2
votes
2
answers
269
views
Unused Injectable services with providedIn: 'root' are Included in main.js, increasing bundle size (Angular 19, Standalone)
Issue:
In an Angular 19 standalone application, I have an API client file containing over 100 @Injectable services, each marked with providedIn: 'root'. However, only 3–4 of these services are used in ...
- 51
0
votes
0
answers
288
views
making esbuild treeshake with sideEffects:false
We have an Angular 18 application that used to be build with webpack. In our webpack.config.js file, we had this:
module.exports = (config, _options, targetOptions) => {
config.module.rules = [
...
- 125
1
vote
1
answer
264
views
esbuild not tree-shaking aws-sdk comand injected client
When bundling typescript code with esBuild, having this configuration:
const buildOpts: BuildOptions = {
target: 'es2020',
format: 'esm',
mainFields: ['module', 'main'],
metafile: true,
...
- 83
0
votes
0
answers
37
views
Why does webpack conditionally exclude certain modules with potential side effects from the bundle?
I have two pieces of code that look almost identical, but when I build them with webpack, I notice a key difference in the resulting bundles.
In one case, the module is included in the bundle, while ...
- 1
2
votes
4
answers
414
views
External library stops working when the production angular app is built
Hello I am building an app which uses the library leaflet.heat. In order to be used it has to be imported as follows:
import * as L from 'leaflet';
import 'leaflet.heat';
...
// Then it can be used:
...
- 2,288
1
vote
1
answer
149
views
Angular 18 with SSR: Setting optimization to true ignores library loaded inside scripts
My Angular 18 application runs smoothly with SSR in development mode. However, when I switch to production mode with optimization set to true, the application fails to locate the 'igv.js' file, even ...
- 2,196
0
votes
1
answer
75
views
Webpack not tree shaking unused import
Webpack is not treeshaking this unused import when creating a production build in my next.js app.
I have marked sideEffects: false in @shared/graphql.mock package.json
file:
import { MockData } from '@...
- 2,000
1
vote
0
answers
204
views
Is it possible to tree shake unused messages in vue-i18n?
My app uses define vite option to configure a feature set for the build. So, depending on the configuration, not all code base is finally in the bundle (bundles). I'm wondering is there a mechanism to ...
- 31
2
votes
1
answer
1k
views
Next.js does not treeshake properly
I have a /components directory in my project where it has an aggregator file (index.js) which re-exports all available components.
- src
- app
- components
- agGrid
- map
- ...
- ...
- 166
4
votes
0
answers
1k
views
Bundle size extreme large, treeshaking not working for tabler icons when build
I have project(called A) built with remix/vite, and it include my other library(called B) built based on storybook and vite. Both A and B have installed @tabler/icons-react as dev dependency.
When I ...
- 41
2
votes
0
answers
297
views
How to Ensure Tree Shaking for Screen-Specific Code in Flutter?
Details
I'm building an embedded Linux Flutter app, and in this embedded world, every byte counts, especially when dealing with OTA updates over a metered network.
The app I'm building will run on ...
3
votes
0
answers
144
views
Angular and tree shaking environment.ts file
I have a general question,
If I have my environment file
export const environment = {
production: true,
featureAEnabled: false,
};
Then in a component
if (environtment.featureAEnabled) {
// Doing ...
- 4,461
0
votes
0
answers
64
views
Error: "Cannot find module 'lowdb/node'" in Cypress
I'm working on a Cypress test suite and I'm trying to load a component that uses the 'lowdb' package. However I'm encountering the following error: cypress error
Cypress version: v13.6.0
Node.js ...
- 1
4
votes
1
answer
1k
views
AntD and Vite: is it normal that only a single Button component generates a big bundle?
I'm using AntD and dealing with huge bundle results. I know for a fact that Vite does tree shaking by default and antD should be compatible with it.
But if for example you create a vite app, install ...
- 522
1
vote
0
answers
33
views
Why are my component smaller when accessing it specifically
I have created my own components library and it should be tree shakable. But by using the VSCode extension importCost I can see that by accessing the specific component the size is significal smaller.
...
- 303
0
votes
1
answer
726
views
How to tree-shake my `tsc` compiled `utils` npm package when importing in a CRA app?
I want to get this to work, but I'm not sure where to start. I control two npm packages:
A frontend CRA app (I'll call it FE)
An utils package used for sharing code between FE and some other packages ...
- 2,206
0
votes
1
answer
1k
views
Does Tailwind CSS tree-shaking work with @apply rules inside *.scss modules?
It's my understanding that Tailwind CSS will tree-shake to only provide bundled CSS with the classes that I'm using. So in the following example:
<div class="flex flex-row">
</div&...
- 51
1
vote
1
answer
684
views
Are unused components in an Angular 16 module removed from the bundle (tree shaking)?
I have a SharedModule and I stuff every component that needs to be included in more than one module in there.
But not every module needs every component that is exported from the SharedModule.
If I ...
- 5,797
0
votes
1
answer
155
views
How to Tree shake @carbon/charts-react?
I am building a react component lib, this lib has @carbon/charts-react as dependency.
in one of the component I am importing RadarChart from @carbon/chars-react
and this the only component from @...
- 4,287
-1
votes
1
answer
820
views
Exporting Multiple Components From An index.js File in react and its side effects
I wanna know if there is any side effects of exporting multiple components from an index.js file in an app created using vite/react(vite) or create-next-app(webpack) so that while importing, i can ...
1
vote
1
answer
111
views
Why does webpack import dead javascript code?
My webpack config has DefinePlugin definition:
module.exports = env => {
const PROD = env.production;
const mode = env.mode || (PROD ? 'production' : 'development');
const plugins = [
...
- 1,360
0
votes
0
answers
205
views
Does "import *" prevent tree-shaking with Firebase? [duplicate]
I've seen https://firebase.google.com/docs/web/modular-upgrade which recommends moving to the Firebase Modular SDK. The recommended way to use it seems to be:
import { initializeApp } from "...
- 6,438
0
votes
0
answers
175
views
React Native IOS release build js tree shaking
I have following js code in my react native project
import ...;
const {PLATFORM} = Config;
if(PLATFORM === 'APN'){
async function onAppleLogin(callback = ()=>{}){
// some logic here
}...
- 63
1
vote
0
answers
246
views
Is there a way to tree shake out a function called in a class method?
Let's consider this code :
class Foo {
type;
constructor(type) {
this.type = type;
}
foo() {
this.type === 'animation' ? create() : createNoop();
}
}
new Foo('animation')
...
- 59.9k
0
votes
1
answer
571
views
conflict between flutter tree shaking and non-constant instance of IconData
In a mobile application I'm trying to construct material icons based on icon data point obtained from server, here's a minimal version of the conflicting code
class CustomIconFactory {
static ...
2
votes
0
answers
116
views
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 ...
- 61
0
votes
1
answer
131
views
What is exactly the difference between Angular and React tree shaking
I have read that incremental DOM used in Angular has a huge advantage because it makes application tree shakable since you know what's being used at a compilation time and in virtual DOM you can't ...
- 49
1
vote
0
answers
226
views
Exclude unused components from vue webpack bundle
I have a Vue3 app built with webpack. It consists of multiple tabs. You can enable and disable tabs with environment variables. Each tab is basically a directory. The directory holds a config file, a ...
- 374
1
vote
0
answers
125
views
StencilJS: Why are all the icons imported at compile time when I am only getting a single icon?
I have an icons.js file which contains icon objects (objects with properties of an icon). In that file, I export a simple getter function which returns the requested icon. I then have an icon ...
- 1,185
7
votes
1
answer
2k
views
JavaScript - Does the use of namespace imports have an effect on a module's treeshake-ability?
Original question:JavaScript - Does the use of namespace imports have an effect on a module's treeshake-ability?
Assume that we are using ES6 module system. According to the docs, when we use an * as ...
- 2,647
0
votes
0
answers
2k
views
Build bundler with Vite (and tree shaking on) __WEBPACK_IMPORTED_MODULE_0__.exports.shape is not a function
I'm working on a UI components library, and I'm bundling with Vite, the goal is to use it like an external library in other repo (with tree shaking on).
When I trying to install it in another existing ...
- 161
1
vote
1
answer
738
views
Enabling Treeshaking for ngx-echarts in angular 15
I'm trying to use treeshaking for ngx-echarts in angular 15 standalone component. I followed the docs, but treeshaking doesn't seems to work.
Can anyone help in this.
I have tried both custom build ...
- 33
3
votes
0
answers
189
views
How to exclude a service from a bundle Angular
Imagine I have a setting in environment that could be true or false for different envs.
And I have an abstract service and two implementations:
@Injectable()
export abstract class TestCommonService {
...
- 170
1
vote
0
answers
61
views
React multiple Exports vs one Export
I was just having a discussion with a colleague about exports. I had a file with a provider component that also initializes a context. My code looked like this:
export const context = createContext(...
- 146
0
votes
0
answers
281
views
Importing only the flags which I'm using in my app (flag-icons library). How importing from CDN works?
I've recently come across a way of importing font awesome icons which would allow the creation of a final bundle with only the icons in use FontAwesome documentation. I understand that the bundler (...
- 573
-1
votes
1
answer
555
views
vue3 + tailwind - dynamic classes - is this acceptable solution?
Tailwind docs say that we should not pass dynamic pieces of class name as props because it will not work, and well it does not.
There are other options. One of them is to predefine object with actual ...
- 1,306
-1
votes
1
answer
1k
views
Tree shaking vs Lazy Loading
In Angular, we can use providedIn: 'root' to make a service tree shakeable. And we can use loadChildren() in our router to specify a lazily loaded module. What's the difference between these two terms ...
- 2,672
0
votes
1
answer
271
views
When deploying to Next JS api to Vercel the css files of a module are removed. How to avoid it?
I need to access a css file of a node_modules package to create swagger documentation inside an endpoint from the Next API.
Tree shaking is being done, so the css files from the swagger-ui-dist ...
- 383
5
votes
0
answers
870
views
Module transpilation within a Next.js project with SWC
I have a project in Next.js and Typescript where I am trying to ensure code splitting and tree shaking works well for our purposes. I recently upgraded to Next.js 13.x and migrated from Babel to SWC.
...
- 2,146
1
vote
0
answers
20
views
Are individual exports treated as atomic entities or modules are the atomic element?
Conceptual question here: does webpack interprets each module export as an atomic identity, isolated from other exports, or modules ARE the atomic element?
I have this situation:
Module A exports 3 ...
- 531
0
votes
0
answers
145
views
Is there any way to preserve unused classes in Dart?
I started developing my own dependency injection package in dart just for fun. The problem I came across is that when a class is in it's own file and is not imported anywhere, dart's tree shaking will ...
1
vote
1
answer
952
views
Rollup Not Tree Shaking D3.js Correctly, Even With sideEffects Flag Set To False?
When using rollup v3 to bundle my npm project that uses the D3.js v7 library to an es6 module for use on the browser, I am ending up with a lot of extra unnecessary code from D3.js in the produced ...
- 749
0
votes
1
answer
384
views
Can't get webpack usedExport / treeshaking to work
Been trying for hours to get webpack to treeshake my code. Here's the repro: https://github.com/dmt0/treeshake-repro
The problem is that even though I'm importing only a few icons from @mdi/js, the ...
- 3,324
0
votes
0
answers
950
views
How can I do tree shaking for Chakra UI in NextJS?
I write the code as shown in the documentation:
import {Box} from '@chakra-ui/react';
But when I run build, my page imports the entire library instead of one component.
I found a post where a user ...
2
votes
0
answers
820
views
Does vite and rollup apply tree shaking on font icons?
I'm switching from Next.js to Qwik. One problem that I have for this migration, is material icons.
In Next, I could easily use MUI icons.
In Next, I use qwikify$ to use MUI icons, but they cause ...
- 1,889
0
votes
1
answer
315
views
How to ignore files from being compiled if they are not bein used
I am building a TypeScript project where I have want to generate output file depending on some conditions (For the actual project it depends on env). I am giving a simplified code example below.
I am ...
