Is code splitting necessary using loadable?

What I found in the official repo of the 2020 theme that each directory contains an index.js and export content from there using loadable. Is that necessary for the theme I working on?
Also, tell me is only index.js file with exporting through loadable is necessary or something extra needed?

Hi @inamkbmail!
Thank you for your question.

I assume that by β€œ2020 theme” you mean @frontity/mars-theme as is the one offered by default when you do npx frontity create your-project-name

? Pick a starter theme to clone:
❯ @frontity/mars-theme (default)

In that theme you have this structure…

β”œβ”€β”€ package.json
└── src
    β”œβ”€β”€ components
    β”‚   β”œβ”€β”€ featured-media.js
    β”‚   β”œβ”€β”€ header.js
    β”‚   β”œβ”€β”€ index.js
    β”‚   β”œβ”€β”€ link.js
    β”‚   β”œβ”€β”€ list
    β”‚   β”‚   β”œβ”€β”€ index.js
    β”‚   β”‚   β”œβ”€β”€ list-item.js
    β”‚   β”‚   β”œβ”€β”€ list.js
    β”‚   β”‚   └── pagination.js
    β”‚   β”œβ”€β”€ loading.js
    β”‚   β”œβ”€β”€ menu-icon.js
    β”‚   β”œβ”€β”€ menu-modal.js
    β”‚   β”œβ”€β”€ menu.js
    β”‚   β”œβ”€β”€ nav.js
    β”‚   β”œβ”€β”€ page-error.js
    β”‚   β”œβ”€β”€ post.js
    β”‚   └── title.js
    └── index.js

There you can see a lot of react components directly defined under the components folder (header, post, title, etc…)

There’s only one component (the one defined in list/index.js) that uses loadable to β€œwrap” the component that is exported

import { loadable } from "frontity";

 * Codesplit the list component so it's not included if the users
 * load a post directly.
export default loadable(() => import("./list"));

This index is not really mandatory for your project to work. You could import directly /components/list/list.js instead of this /components/list/index.js but using loadable allows your final site to have a better performance as different (smaller) bundles are created that will be loaded only when needed (so you can improve a lot the loading speed of your site with a good loadable strategy)

So, answering to your question

Is code splitting necessary using loadable?

No, is not really necessary: But a good idea if you want to improve the performance of your site

Hope this helps

If you have any more questions let us know :slight_smile:

PS: If you can you provide a repository URL I’ll be able to help you better with your project/theme

1 Like

Thanks for clearing things to me. β€œ2020” means " twentytwenty-theme".
Actually I made my own theme and I felt confused about loadable. I’m going to announce this theme soon. TY!


Great news, can’t wait to see it :blush:

Let us know so @Reyes can help you with the announcement sharing it on our communication channels!

I’ve done announcing please check it in your feeds