Skip to content
Handsontable dev

Bundle size

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

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 { Component } from "@angular/core";
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";


registerPlugin(ContextMenu);


@Component({
  selector: "app-example",
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table [settings]="gridSettings" />
  </div>`,
})
export class ExampleComponent {
  readonly gridSettings = <GridSettings>{
    contextMenu: true,
  };
}

Optimize Moment.js

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

To optimize Moment.js locales, use webpack’s IgnorePlugin:

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 { Component } from "@angular/core";
import { GridSettings, HotTableModule } from "@handsontable/angular-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);


@Component({
  selector: "app-example",
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table [settings]="gridSettings" />
  </div>`,
})
export class ExampleComponent {
  readonly gridSettings = <GridSettings>{
    type: "date",
  };
}
Modules