Using dynamic import() to code-split the application

[rajeevnttdata]

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

How to implement dynamic import in lit element. For example, I have more than 20 web components and I want to use lazy loading using dynamic import. How I will do?

Also, I need to know optimization technical for Some chunks are larger than 500 kBs after minification

Reproduction

I don't have working example to post here.,

Workaround

import('../../utils/mq-layout');
import('../common/load-indicator');

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

3.0.0

Browser/OS/Node environment

Node version v18.12.1

[AndrewJakubowicz]

How to implement dynamic import?

The workaround you've listed: (e.g. a dynamic import of a component import('../../utils/mq-layout.js');) is the primitive for code splitting your application.
When you dynamic import your component's code, it will automatically upgrade all instances of that component. And the dynamic import can be used to only load the components that are needed (based on some runtime detection that is application specific).

Regression: Yes. This used to work, but now it doesn't.

I'd like to understand this more, what used to work that doesn't work anymore?

Some chunks are larger than 500 kBs after minification

The optimization depends on what is making up that size. Are you duplicating styles between components (which can be fixed by sharing styles) or bundling large modules?

[augustjk]

To add to this, it also very much depends on the build tool/bundler you're using and its configuration on what dynamic import does and what kind of code splitting you'd get.

[StefanBrand]

For context, Some chunks are larger than 500 KiB after minification is a warning that vite outputs (also see https://stackoverflow.com/q/75719664/9778755).