I don't need all of the components provided in the 'core' library and was hoping to treeshake/selectively choose which components to import. I've tried a few variations and experiments based on other successes but can't seem to get this one to work.
Current:
import { Menu } from '#blueprintjs/core';
Ideal:
import Menu from '#blueprintjs/core/Menu';
You can import specific components like this:
import { Menu } from "#blueprintjs/core/dist/components/menu/menu";
unpkg is helpful for viewing the folder structure of the published package.
Got it to work:
import { Menu } from "#blueprintjs/core/dist/components/menu/menu";
or
import { Toaster } from "#blueprintjs/core/dist/components/toast/toaster";
etc
Related
Below are two different ways to import Antd components, I'm not sure which one's performance will be better in a huge project?
My project was set up with Vue3 and Antd. At the beginning, I import needed components globally in main.ts. So that I can use these anywhere and dont't need import again and again. Below are examples.
main.ts
import { Button, Input, Layout, Menu, Space } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.variable.min.css';
app.use(Input).use(Button).use(Layout).use(Menu).use(Space);
user.vue
<Button>do something</Button>
It's easy to use but my concern is that even if I access to a specific route which has only one component, the browser will load all components sources. Maybe it takes a long time if the network performance is poor. So, I try to import specific components dynamically in views. Below are examples.
user1.vue
// user.vue
import { Menu } from 'ant-design-vue';
user2.vue
// user.vue
import { Menu } from 'ant-design-vue';
Umm... It solved the above issue, but I found that every time I access to different routes which has same component, browser load it every time.
For example, when I access to user1 route, browser loaded Menu component. Then, I access to user2 route, browser loaded it again.
I'm not sure why, or what something I make wrong?
I would really appreciate it, if someone can explain it or tell me how to let users see our views as fast as we can.
For performance reasons the React-Bootstrap documentation suggests importing individual components rather than the whole library. So:
import Button from 'react-bootstrap/Button';
instead of
import { Button } from 'react-bootstrap';
My question is whether there is a limit to this when importing numerous components? i.e.
import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';
as opposed to:
import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';
Is there still such a performance gain that it's better to have the individual import statements, or is there a cutoff that others follow, where more than a certain number of components gets included in one line instead of multiple?
Just use named imports and tree shake not used code. For example with Create-React-App tree shaking is automatically configured. Then using
import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';
is in the end the same as
import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';
To anwser your question directly: Yes, it always better to get rid of not used code. Even if you use ten components from react-bootstrap - this library has A LOT more and I can't imagine a single component where you would use even 70-80% of them.
I want to manage all static resources in my React Native project in the best and mantainable way.
I'm using Image component, and all of this is for passing the local reference of the image, like <Image source={imageReference} />, where imageReference can be get in the next two ways.
I have this:
import mailIcon from '../../../assets/icons/mail.png';
import passwordIcon from '../../../assets/icons/password.png';
import mainLogo from '../../../assets/brand/main-logo.png';
but also have this:
index.js in the assets folder
export const brand = {
mainLogo: require('./brand/main-logo.png'),
logoHorBlanco: require('./brand/logo-hor-blanco.png'),
};
export const icons = {
checked: require('./icons/checked.png'),
unchecked: require('./icons/unchecked.png'),
};
SomeComponent.js in somewhere
import { brand } from '../../assets';
The first way allow me to import only the images that I needed, but is dificult to mantain the paths. The second way, is exported from the assets folder, so when I need an images I just import the right object and use the image that I need with brand.mainLogo (for example).
So I want to know:
If there are differences in performance between the two options.
When im importing the brand object for example, are (in some way) imported (or required, or cached, or something) all images in that object, o just the one that I call with brand.mainLogo.
Thanks.
I'm trying to use a number of d3 packages in a Vue.js project with NPM for package management. I was trying to make a fiddle of a problem I'm having but am unable to replicate the issue there - the code works exactly as it should do.
I'm trying to identify differences between the code running in JSFiddle and the code running in my app and (aside from obvious fact that I'm not running Vue.js in the fiddle) the big one is how I'm importing my extra libraries. In the fiddle I'm adding links to the relevant libraries from CDNJS while in my app I'm using NPM and import. This is all to run charts using dc, which builds on a lot of d3 features. My complete imports for the chart component is:
import dc from 'dc'
import crossfilter from 'crossfilter2'
import * as time from 'd3-time'
import * as scale from 'd3-scale'
I'm not using any features from the base d3 module.
The fiddle in question is here: https://jsfiddle.net/y1qby1xc/10/
I am now using the following structure in my Vue projects. I am making a separate file to import all the needed modules and to export them all at once.
In ./src/assets/d3/index.js:
import { select, selectAll } from 'd3-selection';
import {
scaleLinear,
scaleTime,
scaleOrdinal,
schemeCategory10,
} from 'd3-scale';
import { axisTop } from 'd3-axis';
export default {
select,
selectAll,
scaleLinear,
scaleTime,
scaleOrdinal,
schemeCategory10,
axisTop,
};
Then I import everything into my component and I am able to use all functions with their d3 prefix: d3.select, d3.selectAll etc.
In ./src/components/MyComponent.vue:
<template>
</template>
<script>
import d3 from '#/assets/d3';
export default {
data() {
return {
};
},
};
</script>
I'm trying to add RxSwift to my project. Added RxSwift and RxCocoa to my Podfile but when I compile I get this error:
Tried in another empty project and it all works fine. Can't find what's causing this.
EDIT:
Seems like it fails to build Rx-Cocoa. No idea why.
Don't use self.text, That's wrong you can access the Base class you are extending through base property.
In this case base property is gonna be UITextField.
extension Reactive where Base: UITextField {
public var textInput: TextInput<Base> {
return TextInput(base: base, text: base.text)
}
}
import Foundation
import RxSwift
import RxCocoa
//code insert here!!