How to separate bundles in StencilJS for third-party libraries

441 views Asked by At

I am going to use third-party web components library in a Stencil project. But when I do this, all dependent code are included into bundle with my stencil component and is a big size. How to separate third-party components/modules code in stencil build?

import { Component, h } from '@stencil/core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

@Component({
  tag: 'test-component',
  styleUrl: 'test-component.css',
  shadow: true,
})
export class TestComponent {

  data: Array<Object>;
  grid: IgcDataGridComponent;

  constructor() {
    ModuleManager.register(
      IgcDataGridModule
    );
  }

  componentDidRender() {
    this.grid.dataSource = this.data;
  }

  render() {
    ...

    return (
      <div>Test component
        <igc-data-grid ref={el => this.grid = el as IgcDataGridComponent}
                       height="100%"
                       width="100%"
                       auto-generate-columns="true"
                       default-column-min-width="100"
                       summary-scope="Root"
                       is-column-options-enabled="true"
                       is-group-collapsable="true"
                       group-header-display-mode="Combined"
                       group-summary-display-mode="RowBottom"
                       column-moving-mode="Deferred"
                       column-moving-animation-mode="SlideOver"
                       column-moving-separator-width="2"
                       column-showing-animation-mode="slideFromRightAndFadeIn"
                       column-hiding-animation-mode="slideToRightAndFadeOut"
                       selection-mode="SingleRow"
                       corner-radius-top-left="0"
                       corner-radius-top-right="0">
        </igc-data-grid>
      </div>
    );
  }
}

For example, in this code I need igc-data-grid component will be bundled into separate file. Also igniteui-webcomponents-core, igniteui-webcomponents-grids modules needs to be in separate files to be used in, probably, other stencil components.

0

There are 0 answers