Lazy Loading Tabulator Modules with WebPack

Question

Is there a way to lazy load specifically the core package and separate modules of Tabulator? Using npm, the only package that seems to be possible to import is the tabulator-tables package which in the end results in loading Full Tabulator into web browsers with all modules.

The tabulator table in question is using a couple of modules and it's a great candidate to be loaded lazily.

Using Tabulator v5, bellow is what the beginning table definition looks like.

Promise.all([
    loadTabulatorJS(),
    loadTabulatorCSS()
]).then(([{
    Tabulator,
    MoveColumnsModule,
    FormatModule,
}, {}]) => {
    Tabulator.registerModule([
    MoveColumnsModule,
    FormatModule,
]);
const table = new Tabulator(...), {
    ...

At the top of the JS file imports are defined as per webpack requirements.

const loadTabulatorJS = () => import(/* webpackChunkName: "tabulator" */ 'tabulator-tables');
const loadTabulatorCSS = () => import(/* webpackChunkName: "tabulator-css" */ 'tabulator-tables/dist/css/tabulator.min.css');

Once webpack builds the project, the Full Tabulator is bundled as a single chunk and as a result that unnecessarily large chunk is being loaded by web browsers.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  tabulator-0b52d5a6001326094faa.js (346 KiB)

I've tried importing tabulator-tables/core instead of tabulator-tables but with that specified the build fails.

Answer 1

This is happening because you are importing the entire Tabulator library into your project, which is big,

Instead you can use ESM tree shaking to only import the modules you need, you can import the core library and the modules you need:

import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';

And then register those modules with the Tabulator core:

Tabulator.registerModule([FormatModule, EditModule]);

Full details can be found in the Install Documentation