React Data Grid Bundle size

React Data GridBundle size

Reduce the size of your JavaScript bundle by getting rid of redundant Handsontable modules and Moment.js locales.

On this page

Use modules

To reduce the bundle size and JavaScript parsing time, import only those of Handsontable's modules that you actually use, instead of importing the complete package.

The following example shows how to import and register the ContextMenu plugin on top of the base module of Handsontable, without importing anything else.

import Handsontable from 'handsontable/base';
import { HotTable } from '@handsontable/react-wrapper';
import { registerPlugin, ContextMenu } from 'handsontable/plugins';

registerPlugin(ContextMenu);

const App = () => {
  return (
    <HotTable
      contextMenu={true}
    />
  );
};

Optimize Moment.js

By default, Moment.js (opens new window) (Handsontable's dependency) comes with all possible locales, which increases the bundle size.

To optimize Moment.js locales (opens new window), use webpack's IgnorePlugin (opens new window):

const webpack = require('webpack');

module.exports = {
  //...
  plugins: [
    // ignore all Moment.js locale files
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};

And then explicitly load Moment.js, importing just those locales that you need:

import Handsontable from 'handsontable/base';
import { HotTable } from '@handsontable/react-wrapper';
import { registerCellType, DateCellType } from 'handsontable/cellTypes';

// explicitly import Moment.js
import moment from 'moment';
// explicitly import a Moment.js locale of your choice
import 'moment/locale/ja';

// register the Moment.js locale of your choice
moment.locale('ja');
registerCellType(DateCellType);

const App = () => {
  return (
    <HotTable
      type="date"
    />
  );
};