Skip to content

Commit

Permalink
package size optimization - lodash
Browse files Browse the repository at this point in the history
  • Loading branch information
@salvatore-fxpig
salvatore-fxpig committed May 14, 2020
1 parent 6e9a1d8 commit 4e1e317
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 20 deletions.
8 changes: 4 additions & 4 deletions bundlesize.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
"maxSize": "75 kB"
},
{
"path": "./dist/auspice.chunk.core-vendors.bundle.08ffc3a769477339a352.js",
"path": "./dist/auspice.chunk.core-vendors.bundle.9b6a9c4b675fe63ec02a.js",
"maxSize": "220 kB"
},
{
"path": "./dist/auspice.chunk.other-vendors.bundle.fb028f17c0ac14d133af.js",
"maxSize": "100 kB"
"path": "./dist/auspice.chunk.other-vendors.bundle.99f3458f271574f53feb.js",
"maxSize": "60 kB"
},
{
"path": "./dist/auspice.chunk.locales.bundle.*.js",
"maxSize": "50 kB"
"maxSize": "100 kB"
}
]
}
8 changes: 8 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
"leaflet-gesture-handling": "^1.1.8",
"linspace": "^1.0.0",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.5",
"marked": "^0.7.0",
"mousetrap": "^1.6.2",
"node-fetch": "^2.1.2",
Expand Down
28 changes: 14 additions & 14 deletions src/components/narrative/ReactPageScroller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import React from "react";
import PropTypes from "prop-types"
import _ from "lodash";
import {isNull, isNil, isEqual} from "lodash";

const previousTouchMove = Symbol();
const scrolling = Symbol();
Expand Down Expand Up @@ -55,7 +55,7 @@ export default class ReactPageScroller extends React.Component {
};

this[touchMove] = (event) => {
if (!_.isNull(this[previousTouchMove])) {
if (!isNull(this[previousTouchMove])) {
if (event.touches[0].clientY > this[previousTouchMove]) {
this[scrollWindowUp](SCROLL_THRESHOLD);
} else {
Expand All @@ -67,10 +67,10 @@ export default class ReactPageScroller extends React.Component {
};

this[keyPress] = (event) => {
if (_.isEqual(event.keyCode, KEY_UP)) {
if (isEqual(event.keyCode, KEY_UP)) {
this[scrollWindowUp](SCROLL_THRESHOLD);
}
if (_.isEqual(event.keyCode, KEY_DOWN)) {
if (isEqual(event.keyCode, KEY_DOWN)) {
this[scrollWindowDown](SCROLL_THRESHOLD);
}
};
Expand All @@ -82,14 +82,14 @@ export default class ReactPageScroller extends React.Component {
this[addNextComponent] = (onMountedComponents) => {
let componentsToRender = [];

if (!_.isNil(onMountedComponents)) {
if (!isNil(onMountedComponents)) {
componentsToRender = [...onMountedComponents];
}

componentsToRender = [...componentsToRender, ...this.state.componentsToRender];

if (!componentsToRender[this.state.componentIndex + 1]) {
if (!_.isNil(this.props.children[this.state.componentIndex + 1])) {
if (!isNil(this.props.children[this.state.componentIndex + 1])) {
componentsToRender.push(
<div key={this.state.componentIndex + 1}
ref={c => this["container_" + (this.state.componentIndex + 1)] = c}
Expand All @@ -103,7 +103,7 @@ export default class ReactPageScroller extends React.Component {
};

this[scrollWindowUp] = (amount) => {
if (!_.isNil(this["container_" + (this.state.componentIndex - 1)]) && !this[scrolling]) {
if (!isNil(this["container_" + (this.state.componentIndex - 1)]) && !this[scrolling]) {

var element = this["container_" + this.state.componentIndex].getElementsByTagName('div')[0];
if (element.scrollTop === 0 && amount >= SCROLL_THRESHOLD) {
Expand All @@ -128,7 +128,7 @@ export default class ReactPageScroller extends React.Component {
};

this[scrollWindowDown] = (amount) => {
if (!_.isNil(this["container_" + (this.state.componentIndex + 1)]) && !this[scrolling]) {
if (!isNil(this["container_" + (this.state.componentIndex + 1)]) && !this[scrolling]) {

var element = this["container_" + this.state.componentIndex].getElementsByTagName('div')[0];
if (element.scrollTop === element.scrollHeight - element.clientHeight && amount >= SCROLL_THRESHOLD) {
Expand Down Expand Up @@ -166,7 +166,7 @@ export default class ReactPageScroller extends React.Component {
/* add the first component (react element) to be rendered */
const componentsToRender = [];

if (!_.isNil(this.props.children[this.state.componentIndex])) {
if (!isNil(this.props.children[this.state.componentIndex])) {
componentsToRender.push(
<div
key={this.state.componentIndex}
Expand Down Expand Up @@ -208,9 +208,9 @@ export default class ReactPageScroller extends React.Component {

const componentsToRender = [...this.state.componentsToRender];

if (!!_.isEqual(componentIndex, number)) return;
if (!!isEqual(componentIndex, number)) return;

if (!_.isNil(this["container_" + (number)]) && !this[scrolling]) {
if (!isNil(this["container_" + (number)]) && !this[scrolling]) {

this[scrolling] = true;
this._pageContainer.style.transform = `translate3d(0, ${(number) * -100}%, 0)`;
Expand All @@ -219,7 +219,7 @@ export default class ReactPageScroller extends React.Component {
pageOnChange(number + 1);
}

if (_.isNil(this["container_" + (number + 1)]) && !_.isNil(children[number + 1]))
if (isNil(this["container_" + (number + 1)]) && !isNil(children[number + 1]))
componentsToRender.push(
<div key={number + 1}
ref={c => this["container_" + (number + 1)] = c}
Expand All @@ -235,7 +235,7 @@ export default class ReactPageScroller extends React.Component {
});
}, this.props.animationTimer + ANIMATION_TIMER)

} else if (!this[scrolling] && !_.isNil(children[number])) {
} else if (!this[scrolling] && !isNil(children[number])) {

const componentsLength = componentsToRender.length;

Expand All @@ -248,7 +248,7 @@ export default class ReactPageScroller extends React.Component {
</div>
);
}
if (!_.isNil(children[number + 1])) {
if (!isNil(children[number + 1])) {
componentsToRender.push(
<div key={number + 1}
ref={c => this["container_" + (number + 1)] = c}
Expand Down
7 changes: 5 additions & 2 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const utils = require('./cli/utils');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

/* Webpack config generator */

Expand Down Expand Up @@ -64,12 +65,14 @@ const generateConfig = ({ extensionPath, devMode = false, customOutputPath, anal
cleanStaleWebpackAssets: true
});
const plugins = devMode ? [
new LodashModuleReplacementPlugin(),
new webpack.HotModuleReplacementPlugin(),
pluginProcessEnvData,
new webpack.NoEmitOnErrorsPlugin(),
pluginHtml,
cleanWebpackPlugin
] : [
new LodashModuleReplacementPlugin(),
pluginProcessEnvData,
new webpack.HashedModuleIdsPlugin({}),
new WebpackChunkHash({algorithm: 'md5'}),
Expand Down Expand Up @@ -118,7 +121,6 @@ const generateConfig = ({ extensionPath, devMode = false, customOutputPath, anal
"redux",
"leaflet(-gesture-handling)?",
"i18next",
"lodash",
"styled-components",
"stylis",
"@emotion"
Expand All @@ -132,7 +134,8 @@ const generateConfig = ({ extensionPath, devMode = false, customOutputPath, anal
* a check error if it is unadvertently changed.
*/
const bigVendors = [
"d3-.*",
"d3-.*", // d3 is imported selectively, new usages may change the bundle
"lodash", // lodash is imported selectively using the lodash plugin, new usages may change the bundle
"awesomplete",
"react-transition-group",
"react-icons",
Expand Down

0 comments on commit 4e1e317

Please sign in to comment.