Use modularized

In order to solve the problem of excessive file size in the production environment, React Suite supports ES Module, you can remove the useless code in the file through the Tree Shaking function of the packaging tool.

If your current development environment does not support Tree Shaking, you can use the following 2 methods.

Method 1: Manually import

Manual import requires only importing the files used when writing the code, such as using only the <Button> component:

import Button from 'rsuite/lib/Button';

Import the corresponding style file:

import Button from 'rsuite/lib/Button';
+ import 'rsuite/lib/Button/styles';  // import default style less

You can also import the specified theme style:

import Button from 'rsuite/lib/Button';
+ import 'rsuite/lib/Button/styles/themes/dark';  // import dark theme less

Method 2：Use babel-preset-rsuite

Use babel-preset-rsuite to convert code into an on-demand import during the Babel compilation phase.

Install babel-preset-rsuite

$ npm install babel-preset-rsuite --save-dev

Config

// .babelrc or babel-loader option
{
  "presets": ["rsuite"]
}

Sample code:

// Transforms:
import { Button } from 'rsuite';

// Roughly to:
var _Button = require('rsuite/lib/Button');

Parameter configuration

{
  "presets": [["rsuite", { "style": true, "theme": "dark" }]]
}

style (boolean) , Import style files as needed.
theme ('default'|'dark'), Import style files for the specified theme.

Sample code:

// Transforms:
import { Button } from 'rsuite';

// Roughly to:
require('rsuite/lib/Button/styles/themes/dark.less');
var _Button = require('rsuite/lib/Button');

Disabled HTML styles reset

We reset some HTML styles in rsuite by default.But you may not need these styles when you use modularized. So you should disable import it . This is the example config for less-loader :

{
    test: /\.less$/,
    loader: 'less-loader',
    options: {
        // If you are using less-loader@5 or older version, please spread the lessOptions to options directly.
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@reset-import': false }
        }
    }
}