From ba343677504be460bdf724ad3bd8016bd04812f8 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Fri, 22 Jun 2018 10:16:29 +0200 Subject: [PATCH] perf(bundle-size): remove lodash dependency Shaves 34.57k of final renderer.prod.js bundle size. --- app/components/Contacts/ContactModal.js | 3 +-- app/components/Contacts/Network.js | 5 ++--- app/components/Form/Pay.js | 3 +-- app/lnd/methods/channelController.js | 3 +-- app/reducers/channels.js | 3 +-- app/reducers/contactsform.js | 11 ++++------- app/reducers/payform.js | 8 +++----- .../activity/components/components/Payment/Payment.js | 3 +-- package.json | 1 - 9 files changed, 14 insertions(+), 26 deletions(-) diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js index 867057a6..0b13c381 100644 --- a/app/components/Contacts/ContactModal.js +++ b/app/components/Contacts/ContactModal.js @@ -1,6 +1,5 @@ import React from 'react' import PropTypes from 'prop-types' -import find from 'lodash/find' import ReactModal from 'react-modal' import FaCircle from 'react-icons/lib/fa/circle' import MdClose from 'react-icons/lib/md/close' @@ -47,7 +46,7 @@ const ContactModal = ({ } // the remote node for the channel - const node = find(channelNodes, { pub_key: channel.remote_pubkey }) + const node = channelNodes.find(node => node.pub_key === channel.remote_pubkey) return ( { - const node = find(nodes, n => displayedChannel.remote_pubkey === n.pub_key) + const node = nodes.find(n => displayedChannel.remote_pubkey === n.pub_key) if (node && node.alias.length) { return node.alias @@ -213,7 +212,7 @@ class Network extends Component { {loadingChannelPubkeys.length && loadingChannelPubkeys.map(loadingPubkey => { // TODO(jimmymow): refactor this out. same logic is in displayNodeName above - const node = find(nodes, n => loadingPubkey === n.pub_key) + const node = nodes.find(n => loadingPubkey === n.pub_key) const nodeDisplay = () => { if (node && node.alias.length) { return node.alias diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js index 89e36c04..4cc4053f 100644 --- a/app/components/Form/Pay.js +++ b/app/components/Form/Pay.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import find from 'lodash/find' import Isvg from 'react-inlinesvg' import paperPlane from 'icons/paper_plane.svg' @@ -59,7 +58,7 @@ class Pay extends Component { } = this.props const displayNodeName = pubkey => { - const node = find(nodes, n => n.pub_key === pubkey) + const node = nodes.find(n => n.pub_key === pubkey) if (node && node.alias.length) { return node.alias diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js index 07bc86a2..d7884457 100644 --- a/app/lnd/methods/channelController.js +++ b/app/lnd/methods/channelController.js @@ -1,10 +1,9 @@ -import find from 'lodash/find' import { listPeers, connectPeer } from './peersController' import pushopenchannel from '../push/openchannel' function ensurePeerConnected(lnd, pubkey, host) { return listPeers(lnd).then(({ peers }) => { - const peer = find(peers, { pub_key: pubkey }) + const peer = peers.find(candidatePeer => candidatePeer.pub_key === pubkey) if (peer) { return peer } diff --git a/app/reducers/channels.js b/app/reducers/channels.js index c74cfe0d..c2269756 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -1,6 +1,5 @@ import { createSelector } from 'reselect' import { ipcRenderer } from 'electron' -import filter from 'lodash/filter' import { btc } from 'utils' import { showNotification } from 'notifications' import { requestSuggestedNodes } from '../api' @@ -483,7 +482,7 @@ channelsSelectors.channelNodes = createSelector( (channels, nodes) => { const chanPubkeys = channels.map(channel => channel.remote_pubkey) - return filter(nodes, node => chanPubkeys.includes(node.pub_key)) + return nodes.filter(node => chanPubkeys.includes(node.pub_key)) } ) diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js index 25b91fc2..7c94e749 100644 --- a/app/reducers/contactsform.js +++ b/app/reducers/contactsform.js @@ -1,6 +1,4 @@ import { createSelector } from 'reselect' -import filter from 'lodash/filter' -import isEmpty from 'lodash/isEmpty' import { tickerSelectors } from './ticker' import { btc } from '../utils' @@ -234,10 +232,9 @@ contactFormSelectors.filteredNetworkNodes = createSelector( const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery // list of the nodes - const list = filter( - nodes, - node => node.alias.includes(query) || node.pub_key.includes(query) - ).sort(contactableFirst) + const list = nodes + .filter(node => node.alias.includes(query) || node.pub_key.includes(query)) + .sort(contactableFirst) // if we don't limit the nodes returned then we take a huge performance hit // rendering thousands of nodes potentially, so we just render 20 for the time being @@ -270,7 +267,7 @@ contactFormSelectors.manualFormIsValid = createSelector(manualSearchQuerySelecto } return { errors, - isValid: isEmpty(errors) + isValid: Object.keys(errors).length === 0 } }) diff --git a/app/reducers/payform.js b/app/reducers/payform.js index 50ec8453..7c51f5d9 100644 --- a/app/reducers/payform.js +++ b/app/reducers/payform.js @@ -1,8 +1,6 @@ import { createSelector } from 'reselect' import bitcoin from 'bitcoinjs-lib' -import isEmpty from 'lodash/isEmpty' - import { setFormType } from './form' import { tickerSelectors } from './ticker' import { infoSelectors } from './info' @@ -267,9 +265,9 @@ payFormSelectors.payFormIsValid = createSelector( return { errors, - amountIsValid: isEmpty(errors.amount), - payInputIsValid: isEmpty(errors.payInput), - isValid: isEmpty(errors) + amountIsValid: !errors.amount, + payInputIsValid: !errors.payInput, + isValid: Object.keys(errors).length === 0 } } ) diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js index e2b6c725..1e32098c 100644 --- a/app/routes/activity/components/components/Payment/Payment.js +++ b/app/routes/activity/components/components/Payment/Payment.js @@ -1,6 +1,5 @@ import React from 'react' import PropTypes from 'prop-types' -import find from 'lodash/find' import Moment from 'react-moment' import { btc } from 'utils' @@ -9,7 +8,7 @@ import styles from '../Activity.scss' const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, currencyName }) => { const displayNodeName = pubkey => { - const node = find(nodes, n => pubkey === n.pub_key) + const node = nodes.find(n => pubkey === n.pub_key) if (node && node.alias.length) { return node.alias diff --git a/package.json b/package.json index b994f448..6bcc13e2 100644 --- a/package.json +++ b/package.json @@ -229,7 +229,6 @@ "electron-store": "^2.0.0", "font-awesome": "^4.7.0", "history": "^4.6.3", - "lodash": "^4.17.10", "moment": "^2.22.2", "prop-types": "^15.5.10", "qrcode.react": "0.8.0",