Question

我的react-dates组件正在运行，但是我的捆绑包JS文件为600kb。我需要的只是DateRangePicker组件，仅此而已。我可以编辑代码和/或压缩bundle js文件以使其更小吗？

我使用下面的App.js和index.js代码尝试了几种不同的构建，所有捆绑包仍以600kb结尾。我的main.0a110825.js捆绑文件太大，无法粘贴到这里。

这是一个链接，可帮助我使组件在页面上正常工作，现在，我只是希望有一个较小的捆绑包文件。

谢谢您的帮助！

<!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();

如何减小React bundle JS文件的大小？

0 个答案: