10

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.