How to make ReactDOM smaller when importing into my project?
This is what the Import Cost extension in VS Code shows - it's in read font color - about the size of ReactDOM:
here is the screenshot
Any idea how to make it smaller and make Import Costs shows it in green and not red?
ReactDOM is heavy because of the amount of implementations it has. Anyone who uses React will have the same "issue" but I personally wouldn't recommend touching it. This is how it works under the hood if you see anything you want to alter/ remove to make your ReactDOM smaller if it is absolutely necessary.
https://github.com/facebook/react/tree/main/packages/react-dom
Related
Considering caching in a browser extension and the stop/restarting of background service worker (or event page), which of the following would perform better?
Importing One large-ish module with multiple classes
Multiple smaller modules (4-5)
Most of the classes are used in service workers. Some of the classes are also used elsewhere as well (i.e. browser action popup an options page).
Multiple files provide a cleaner dependency structure. On the other hand, multiple file access may use more resources.
Example:
// background.js
import {one} from './one.js';
import {two} from './two.js';
import {three} from './three.js';
import {four} from './four.js';
// popup.js
import {one} from './one.js';
import {two} from './two.js';
// options.js
import {one} from './one.js';
import {four} from './four.js';
// ----- vs -----
// background.js
import {one, two, three, four} from './one.js';
// popup.js
import {one, two} from './one.js';
// options.js
import {one, four} from './one.js';
In Chrome you can use devtools timeline (JS profiler) to see the actual impact. There's also chrome://tracing that shows browser internals. A similar tool exists in Firefox.
In short, that 1 millisecond you can gain due to bundling a few scripts may be entirely negligible on a modern computer with SSD and enough memory for the OS to cache the files in-memory. You would probably have to import dozens of scripts to see a pronounced difference.
That said, one bundle would perform better on the much slower HDD that is still widely used, so you may want to use modules in the source code, but then compile it into a bundle, one per each entry e.g. for a content script, for the background script, etc.
To put things in perspective, the wake-up process itself is much more heavy in comparison:
When the background script starts, it takes at least 50ms to create the JS process and set up the environment.
Then your scripts are loaded from disk - fast on SSD or when cached by the OS, slow otherwise.
JS interpreter parses and compiles the files (extensions don't use code cache) - duration is proportional to the amount of code, 100ms per 1MB on average probably.
Note that there's no dedicated caching for extensions in Chrome, neither for reading the script from the disk, nor for code parsing and compilation.
If your extension restarts often, it will negatively impact the overall browser performance and it may easily exceed any positive gains due to lesser memory consumption between the runs, which you can also see in a performance profiler or by measuring the power consumption delta when using a semi-persistent background script.
After developing an application up to the delivering to mass market, I now want to improve codebase and reduce technical debts.
I realized that I have a huge amount of import statements at the top of my react components. In one case it's more than 50 lines.
I also realized that in almost all of my components I have some commen imports, like React, useEffect, useState from react library, and TextFilter, NumericFilter, Spinner, Dialog, Show from my internal components.
Thus even if I somehow centralize common imports, I can reduce the lines of code by at least 5% factor.
How can I reduce these lines of codes:
import { React, useState, useReact } from 'react';
import TextFilter from '../Components/Filters/TextFilter';
import NumericFilter from '../Components/Filters/NumericFilter';
import Dialog from '../Components/Dialog';
To something like this:
import * from 'common';
Also I couldn't find a good answer on the performance benchmarks related to centralizing ALL imports. In other words, in my application, let's say I have 180 distinct import statements, including icons.
What happens if I centralize ALL of them?
Create a Barrelfile.
It basically makes you create a top-level index.ts where you export all your components. Then you can import everything from that 1 index.ts file. Works for JS as well.
Another thing, I would do is use React.useEffect instead of destructuring useEffect. Reduces a lot of LOCs. But that's just my preference.
Another thing I use is relative aliases like #/ instead of ../../. I use it with Next.js like https://nextjs.org/docs/advanced-features/module-path-aliases
You could create an alias.
The setup depends on your build tools.
For webpack, it would look like this:
https://dev.to/georgedoescode/simplify-your-imports-with-webpack-aliases-59f
Centralizing all components might increase the danger of breaking tree shaking or adding circular dependencies. If you check your bundle size after the refactor and add some linter to check for cycles there shouldn't be a problem.
So I'm a bit new to bundle size performance improvements and something I'm trying to do is to reduce the import cost of my component library that's written in TSDX. It's a tool to create Typescript libraries based on rollup.js. I'm using the out of the box setup.
When I investigated my app I found out that the import cost of components from my component library seems to be a lot. See images:
It seems that when I import a single component (or function) there is a lot of other things imported as well. Is there someone out there that knows if this is normal and/or if I can improve this? Maybe someone knows how I can import it like how they do it with the lodash packages where you import a single util from a specific folder like so: import { add } from 'lodash/add'?
So long story short: how can I reduce the import cost of my TSDX (based on rollup.js) library? Thanks in advance!
I wrote my website with a mixture of React classes and functional components. Now I am considering rewriting it using React Hooks. It's critical to me to keep my compiled bundle small. Should I expect switching to Hooks to substantially increase or decrease the size of the bundle?
Dont worry it doesnt really matter as both do the same work plus when you use react hooks
your bundle size tends to decrease as your code gets drastically minified.
Here is a link you can check out from medium.com on the same issue: the article link
The support for react hooks does increase your size by 1.5kb but your code is less now
After having some problems getting momentjs localized date formats to work properly, I happened upon a thread that correctly stated that the target moment locale resource would have to be imported, e.g., for French (fr):
import 'moment/locale/fr';
and indeed this works. However this would would imply that the module I'm coding using moment would have to explicitly import every moment locale module? If so, this implies that the code would have to be touched every time a new locale is supported? This would't seem right.
I'm hoping for a better solution for this.
Usually the list of supported application languages is limited, so it's unreasonable to load all available Moment locales because of increased footprint.
Moment package contains prebundled locales for this purpose. E.g:
import moment from 'moment';
import 'moment/min/locales';
Or:
import moment from 'moment/min/moment-with-locales';