how to apply code splitting?

[guoerwei]

�I tried dynamic import, but failed.
any examples?

[rokoroku]

Could you provide your code example here? I can help you then

[ghost]

I was able to get dynamic import working with the below code and changing the target and module settings in tsconfig.json to esnext. However, something with that change breaks the production css extraction and results in an empty style.css file. Not sure what is causing that though.

Change main.tsx to:

ReactDom.render(
    <div>
        <button onClick={e => import('app/utils/print').then(module => {
            module.default();
        })}>Click me and look at the console!</button>
    </div>,
    document.getElementById('root')
);

print.ts in app/utils/print:

console.log('The print.ts module has loaded! See the network tab in dev tools...');

export default () => {
    console.log('Button Clicked: Here\'s "some text"!');
}