0

我的 react-dates 组件正在运行，但我的 bundle JS 文件是 600kb。我只需要 DateRangePicker 组件，仅此而已。我是否可以编辑代码和/或压缩捆绑 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();
4

0 回答 0