Hey,
I started to port a old project to reactJS (is a old system project) with some crud forms - I’m a noob in reactjs. I’m using Core UI for template, and used some packeges like: formik, react table v6, react-intl, reactstrap, dfFns … (dont used redux for now).
The core UI build is about 16 MB. My project build is about 80 MB 
(With something about 70 forms + 70 lists). This build is too large (tremendous large).
This is my form example (this is a simple form, so more complex thing have more imports, code…):
import React, {Component} from 'react';
import { Formik, Form, Field } from 'formik';
import { FormikInput } from 'scenes/v1/shared/components/Forms/Formik/Inputs';
import { FormattedMessage } from 'react-intl';
import * as Yup from 'yup';
import { Row, Col, Button, InputGroup,
Card, CardBody, CardTitle
} from 'reactstrap';
import deepEqual from 'lodash.isequal';
import api, {filterFormApiErrors} from 'services/api';
import { withRouter } from 'react-router-dom';
import AlertsToasts from 'scenes/v1/shared/components/Messages/AlertsToasts';
let formMeta = null;
const initialValues = {
name: '',
};
class MyForm extends Component {
constructor(props){
super(props);
this.state = initialValues;
const id = this.props.itemId;
if(!id){
formMeta = {
data: null,
method: 'post',
route: '/module/gri/dg-type',
title: 'form.create',
confirm: 'button.save'
}
}else{
formMeta = {
data: id,
method: 'put',
route: `/module/gri/dg-type/${id}`,
title: 'form.update',
confirm: 'button.update'
}
}
}
componentDidMount(){
if(formMeta.data){
api.get(formMeta.route)
.then((response) => {
const {name} = response.data;
this.setState({
name,
});
})
}
}
render() {
return (
<Card>
<CardBody>
<CardTitle>
<FormattedMessage id={formMeta.title} />
</CardTitle>
<Formik
enableReinitialize={true}
initialValues={this.state}
validationSchema={Yup.object().shape({
name: Yup.string()
.max(150, 'error.max')
.required('label.required')
})}
onSubmit={(values, { setErrors, setSubmitting }) => {
const request =
formMeta.method === 'post' ?
api.post(formMeta.route, values) :
api.put(formMeta.route, values);
request.then(response => {
this.setState({...values});
AlertsToasts.showSuccess('success');
if(formMeta.method === 'post'){
let {id} = response.data.data;
this.props.history.push('/module/mac-equip/dg-type/edit/'+id);
}
})
.catch(err => {
let errors = filterFormApiErrors(err);
if(errors){
setErrors(errors);
}
})
.finally(() => {
setSubmitting(false);
})
}}
render={props => {
const {
values,
errors,
initialValues,
isSubmitting,
handleSubmit,
} = props;
const hasChanged = !deepEqual(values, initialValues);
const hasErrors = Object.keys(errors).length > 0;
return (
<Form onSubmit={handleSubmit}>
<Row>
<Col className="mb-3" sm="6">
<Field name="name"
type="text"
value={values.name}
component={FormikInput}
haschanged={hasChanged ? 1 : 0}
label="label.identification"
/>
</Col>
</Row>
<InputGroup className="">
<Button type="submit" disabled={!hasChanged || hasErrors || isSubmitting} color="primary" className="px-5">
<FormattedMessage id={formMeta.confirm} />
</Button>
</InputGroup>
</Form>
)
}}
/>
</CardBody>
</Card>
)
}
}
export default withRouter(MyForm);
This is my source-map
My questions is: Is a project with this build size normal? What I can study to improve this? (Eject is not a option for now).