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!
Related
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
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.
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';
Background: My company's web-app is in fact several completely separated apps that have minimal effect on one another. That's why it doesn't make any sense to keep them under a single project - so I'm using separate projects. However, since I started migrating and writing new apps in ReactJS (using Webpack for bundling) I find many opportunities for reuse, in order to avoid code duplication and to avoid downloading common resources again after another app already fetched them:
I'm using specific versions of 3rd party npm modules - so no reason to bundle them over and over again - and no reason to upload them to the server more than once (for all the projects).
How do you share package.json fixed versions across projects?
Do you bundle all/groups of npm modules together or each separately? I want to get everything from the server for cases of on-premise deployment.
What measures to you take to make sure you don't forget to re-bundle the node modules in case you decided to update one of them?
Similar question goes for font files (keeping the font on the server and another font for icons)
common style sheets
common JS code - like utils & common
common web.config configurations
common images (currently some of them are inline in different bundles)
and last - common components - how do you share them? Do you use a separate project and publish to npm? symlink?
Or maybe, after all, I should go with a monorepo? And how?
You could create a separate project, my_modules, which is just a manifest of the shared, common packages. You'd have a package.json with all the common modules, and a single index.js which does something like:
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
export { React, Component, PropTypes, moment };
Then, you'd publish this new my_modules project to github, and install that in your other projects.
import { React, Component, PropTypes } from 'my-modules';
Every time you change a package, you'd increment the version, and then update that version in your projects (which is still a bit of a pain, but you could use something like greenkeeper.io to ensure they don't get stale).
Similarly, you can do the same thing for just about everything else you've mentioned, although you don't want to go overboard with this; you should only share standard assets that doesn't change very often, and keep project-specific assets in their own repo.
EDIT: wanted to add, for React components, this is actually a really good practice, because it forces you to write generalized, independent components. You can use something like React Storybook to create these components in isolation. You can publish one master package with all the packages, individual components as packages, or somewhere in between (eg. all Form components in one package). Either way, though, they can still share a repo for convenience.
I need to change the default LKM File to Spark Knowledge Module in ODI 12c. Unfortunately, when I try to import it from /.../odi/sdk/xml-reference/component_kms/spark_python, nothing appears in the list of Knowledge Modules to import. Knowledge Modules do appear (though the wrong ones) when I look at /.../odi/sdk/xml-reference/.
Looking at the structure of the Spark KM XMLs, it appears different to the regular KMs.
Does anyone know if there is a way to import these modules to make it possible to copy/change them?
Components KM can not be imported / duplicated / modified / deleted. While the template-based KMs are just a template of code that you can edit and fine-tune, components KMs are based on java libraries and act more as black boxes. You can't create your own component KM. An editor for component KMs might be available in the future though.
If you really have to change something in the Spark KM, I guess your only solution is to create a new template-based KM for Spark.