Why does ag-grid code appears in my stenciljs component bundle? - optimization

Question

I am trying to optimize a StencilJS component that uses ag-grid as third party dependency. Currently, rollup is adding ag-grid definitions to my bundle of code resulting in ~1Mb bundle size (archived).
Is there a way to achieve code separation in my bundle? or am I looking at things in the wrong way?
This component is used in a vue app alongside other 3rd party web component that also uses ag-grid. The ag-grid code will be duplicated in this scenario.
The component library is fairly simple with only 2 ts components:
$ ls -l src/components/product-picker/
total 30
-rw-r--r-- 1 197121 1692 Aug 8 10:35 readme.md
-rw-r--r-- 1 197121 41 Jul 9 13:38 product-filter.scss
-rw-r--r-- 1 197121 6521 Jul 19 09:34 product-filter.tsx
-rw-r--r-- 1 197121 371 Jun 25 11:51 product-picker.scss
-rw-r--r-- 1 197121 10089 Aug 8 10:21 product-picker.tsx
-rw-r--r-- 1 197121 1630 Jul 15 17:00 product-picker-grid.scss
drwxr-xr-x 1 197121 0 Jun 25 11:51 test/
This is how I import the ag-grid in my tsx component
import { ModuleRegistry } from '#ag-grid-community/core';
import { ClientSideRowModelModule } from '#ag-grid-community/client-side-row-model';
import { Grid, GridOptions } from '#ag-grid-community/core';
[...]
ModuleRegistry.registerModules([
ClientSideRowModelModule,
]);
#Component({
tag: 'product-picker',
styleUrl: 'product-picker.scss',
})
This is how the build files looks like:
$ ls -lh dist/esm/
total 2.2M
-rw-r--r-- 1 197121 1 Aug 8 10:35 index.js
-rw-r--r-- 1 197121 41K Aug 8 10:35 index-0f6f2d39.js
-rw-r--r-- 1 197121 931 Aug 8 10:35 loader.js
drwxr-xr-x 1 197121 0 Aug 8 10:35 polyfills/
-rw-r--r-- 1 197121 2.2M Aug 8 10:35 product-filter_2.entry.js
-rw-r--r-- 1 197121 947 Aug 8 10:35 product-picker.js
The product-filter_2.entry.js file has all the lines of code related to ag-grid.

Answer 1

Option 1
You could try using Typescript 3.8's type only imports :
That way, you get the type safety of TS, without including all of ag-grid in your Stencil bundle. This assumes that some other component on the page does include ag-grid in a way that makes it accessible to your Stencil component
Option 2
If you're using webpack you could consider marking ag-grid as an external library, not to be included in the generated bundle.
There's a similar question around not bundling the React runtime with every component, and instead adding it just once on the page with a script tag to reduce bundle sizes.
https://github.com/webpack/webpack/issues/1275#issuecomment-123846260
{
...
externals: {
// Use external version of React
"react": "React"
},
...
}
Option 3
You could not add ag-grid as a dependency to your Stencil project and instead rely on the existence of window.agGrid or something similar. Personally I dislike that option because at this point, you get no type safety in your Stencil project.