Best practices to dynamically load components

Hi guys,
I have a simple question for you.

I Have a toolbar with 4 tabs. Inside this bar I load 4 different components in this way:

<div class="toolbar tabbar toolbar-top">
    <div class="toolbar-inner">
        <a class="tab-link tab-link-active" href="#tab-1" >Tab 1</a>
        <a class="tab-link" href="#tab-2" >Tab 2</a>
        <a class="tab-link" href="#tab-3" >Tab 3</a>
    </div>
</div>

<div id="tab-1" class="page-content tab">
    <${component_1}/>
</div>

<div id="tab-2" class="page-content tab">
    <${component_2}/>
</div>

<div id="tab-3" class="page-content tab">
    <${component_3}/>
</div>

And this is the piece of code in the script section:

import component_1 from './component_1.f7.html'
import component_2 from './component_2.f7.html'
import component_3 from './component_3.f7.html'

This code works fine, but the components are very heavy. I would like to dynamically load the components on on:open event e remove from the dom when the user change tab. Is it possible? In this way I can have a light page in my app.

You can use Routable Tabs https://framework7.io/docs/routes.html#routable-tabs

When I change the tab, the content of the previous tab will be removed from the Dom?

yes, it will be removed

1 Like