0

My react-dates component is working, but my bundle JS file is 600kb. All I need is the DateRangePicker component and nothing more. Is it possible for me to edit the code and/or compress the bundle js file to make it smaller?

I have tried a few different builds, using the App.js and index.js code below, with all bundles still ending around 600kb. My main.0a110825.js bundle file is too large to paste here.

Here is a link that helped me get my component to work on my page, now I am just hoping to have a smaller bundle file, if possible.

react-dates-demo

Thank you for your help!

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
    <link href="/static/css/main.1a15b309.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.0a110825.js"></script>
</body>

</html>

import React, { Component } from 'react';
import './App.css';

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

import { DateRangePicker } from 'react-dates';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null,
    };
  }

  render() {
    return (
      <div className="App">
        <DateRangePicker
          startDateId="startDate"
          endDateId="endDate"
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onDatesChange={({ startDate, endDate }) => { this.setState({ startDate, endDate })}}
          focusedInput={this.state.focusedInput}
          onFocusChange={(focusedInput) => { this.setState({ focusedInput })}}
        />
      </div>
    );
  }
}

export default App;

import 'airbnb-js-shims';

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
jake
  • 1
  • 1
  • I have already searched on google, yes there are numerous resources, thousands of versions, I was hoping to find the best solution from intelligent people on a website where developers learn, share, & build careers, not a search engine with millions of different answers. I always succeed in the end, with or without any help, but it would be nice to have an expert out there that can help me resolve this issue. As a designer, I have always helped many developers and others my entire life, hopefully there is a kind developer with good karma that can help me now. – jake Oct 09 '19 at 16:53
  • This is actually not as simple as it looks. On one hand, Webpack's production build already does minification and [tree shaking](https://webpack.js.org/guides/tree-shaking/) so beyond replacing or removing dependencies, it will be hard to improve on [Webpack's production mode](https://webpack.js.org/guides/production/). I would be happy to stand corrected but as of now, this is the reality of building React.js application in 2019. The mere usage of open-source components and libraries to build your application will make it bloated as each library depends on many other library. – JKleinne Oct 09 '19 at 19:37
  • There are of course "workarounds" such as server-side rendering, code-splitting with dynamic imports, etc. but as stated above, it comes with an overhaul of your code. – JKleinne Oct 09 '19 at 19:40
  • If you want to import this component in other component you can leave out React, use [peer dependencies](https://stackoverflow.com/a/58256291/1641941) – HMR Oct 09 '19 at 20:36

0 Answers0