I'm using esbuild to build my web-components using lit.
I'm now investigating code splitting to make my bundles smaller.
I generate a lot of components( ~100 ) that all have the same import statement
import { LitElement, html, nothing } from "lit";
import { customElement, property } from 'lit/decorators.js';
And this ends up with importing the code from lit into all of my components.
Adding the
chunkNames: 'chunks/[name]-[hash]',
splitting: true,
format: 'esm',
to the esbuild config makes esbuild create 'chunks' that contains the content of the import files and makes each bundle much smaller. Exactly what I'm looking for :)
BUT..
Some of my imports is files that is not shared between components, just a component that is split into more files to make it more readable.
Is it possible to tell esbuild that 'do not create a chunk of this file, just bundle it into the the current entry point'?
import { LitElement, html, nothing } from "lit"; //<-- Create a chunk of this
import { customElement, property } from 'lit/decorators.js';//<-- Create a chunk of this
import { ComponentViewModel } from './ViewModel'; //<--bundle this
import { ActiveKeysFromIndexTypeRESTApi } from './DataFromRESTApi'; //<--bundle this