Say I have the following:
import validator from 'validator'
and in my code do:
validator.isEmail(txt)
Would that import the entire validator and increase the overall package size?
if, how do I avoid this?
Your statement will import the whole validator.
What are you looking for is this
import { isEmail } from ‘validator’
isEmail should be e exported in the source file.
Related
Today I am using import aliasing to change the name of an import in React:
import { Something as SomethingElse } from 'somewhere';
However, after switching this file over to TypeScript, the same thing doesn't seem possible. Only after removing the alias am I able to use the import:
import Something from 'somewhere';
Is it possible to use an import alias in TypeScript?
That's a default export, so you could just name it whatever you want:
import SomethingElse from 'somewhere';
Although... changing the file to TypeScript should not magically cause it to change from named export to default export...
When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
I have a large bundle that needs to be split into several chunks to get below the 2MB PWA restriction.
From the BundleAnalyzerPlugin I can see that I would benefit from trying to split out lodash, fontawsome and moment into separate chunks/bundle files.
I have tried to use the import() splitting technique described here but can't see how to make it work for Fontawesome.
The below example does not work, since it still leaves fontawesome in the bundle and only loads icons when interacted with.
import { faBell, faEyeSlash, faEye} from '#fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '#fortawesome/free-regular-svg-icons';
import('#fortawesome/fontawesome-svg-core').then(fontawesome => {
fontawesome.library.add(
faBell, faEye, faEyeSlash, regularBell
)
})
What is the correct technique for separating packages such as lodash, fontawesome and moment into separate bundles?
Kind regards /K
For tree-shaking to work with the font-awesome react packages in webpack, I needed to import the icons from the subfolder directly like this:
import { faBell } from '#fortawesome/free-solid-svg-icons/faBell';
import { faEyeSlash } from '#fortawesome/free-solid-svg-icons/faEyeSlash';
import { faEye } from '#fortawesome/free-solid-svg-icons/faEye';
import { faBell as regularBell } from '#fortawesome/free-regular-svg-icons/faBell';
I am on webpack v4 and fontawesome v5.
I don't know what exactly are you trying to come up with but i'm assuming you want a lower bundle size then I did a research for you:
If you really want to push your bundle size to the lowest then look for gzip compression
https://webpack.js.org/plugins/compression-webpack-plugin/
A little bit research would lead you to this:
https://webpack.js.org/guides/code-splitting/
What is the correct technique for separating packages such as lodash,
fontawesome and moment into separate bundles?
For lodash:
// You should be using:
import isEmpty from 'lodash/isEmpty'
// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';
read: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/
For moment:
https://medium.com/#Memija/less-is-more-with-moment-and-moment-timezone-d7afbab34df3
For fontawesome:
I don't know exactly is this?
The below example does not work, since it still leaves fontawesome in
the bundle and only loads icons when interacted with.
Yes, it'll be included to the bundle of course depending on what you've stated in your config? What you did is from the docs itself:
https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking
Would it be possible to import * from multiple files within the same import declaration i.e
Imports would usually be made with one file as follows
import * as action from '../actions/ActionCreators'
Would the following be possible by some means?
import * as action from { '../firstActions/FirstActionCreators', '../secondActions/SecondActionCreators' }
whereby the same is import is made from two different directories/files.
Thanks
The best practice is to import only the required stuff. Since you are using ES6 you can try like this.
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router'