Make your web app faster with webpack code splitting

[@nemnoton]

I'm wondering how you create the chunks? And those dynamic imports, what is being imported and how do you create such an asset? (maybe it is vaadin-related, I'm only familiar with vue)

[@vaadinofficial]

Webpack creates chunks automatically when it encounters import() statements. The thing being imported is a JS module (a view in this case). The mechanics of how views are loaded in Vue are different, but the same webpack principles apply. The webpack documentation on code splitting can be helpful webpack.js.org/guides/code-splitting/

[@nemnoton]

@@vaadinofficial I see, thanks for explaining! Seems like a great thing to utilize.

[@hmartsocks]

can you do a video on using fine-grained access control?

[@vaadinofficial]

Sounds like a good idea. We'll add it to the idea backlog!

[@justindb83]

Does anyone have a base config setup with Lit-Element, Webpack 5.0 ? Can't seem to get webpack 5.0 working with Lit-Element

[@lars4953]

Very informative, as always. I would be interested in a more detailed introduction in webpack, especially for PWA's.

[@vaadinofficial]

So how to cache views and assets for offline? Or what kind of PWA setup are you looking for?

[@lars4953]

@@vaadinofficial Right, for offline would be great.

[@xotic3196]

can this be used for my WordPress website please let me know

[@vaadinofficial]

No, this is not directly applicable to WordPress. In WP, every page is a separate document, so they don't have the same need for this as single-page-apps.

[@shankarsg1405]

Thank you for video... how to do it using Java API ?

[@vaadinofficial]

Unfortunately, the Flow Java API doesn't support code splitting. You can load NPM dependencies dynamically with a small workaround discussed here github.com/vaadin/flow/issues/5623#issuecomment-533093977

[@RojusRzevuskis]

I pretty much hate late loading, countless times I would try to click something just to have layout change under my cursor. Or all the fun times when I have to sit there and wait, even though I can see the content that I want to interact with, but can't because I know it will change as soon as I go for it. Drives me nuts, I tell ya!

[@vaadinofficial]

You definitely need to be mindful of what you defer. When you do it on a view-level, it's usually less of an issue. If you load something on the page, you may need to take some precautions to make sure it doesn't cause a lot of jumping around.

[@Oswee]

Great content as always! Now that basics are covered, we can extend this to the Redux sub-module level. Inject the module slice only when needed. Let's say at the same View level. :) (Dynamic Modules, Reducer Registry, etc)

[@vaadinofficial]

The same idea applies for anything you can import. For something like Redux, you would probably want to import the needed things in the view itself, and split the bundles based on route.

[@Oswee]

@@vaadinofficial Yes. But Redux has a single store. And so there are some caveats.

[@vaadinofficial]

The Redux docs have some tips on dealing with code splitting redux.js.org/recipes/code-splitting.

[@Oswee]

@@vaadinofficial Personally i did that already. Just keeping a discussion. :)

[@vaadinofficial]

Great. Thanks for your comments. We'll definitely explore state management in future videos.