Is code splitting necessary using loadable?

🙋Get Help
1

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?

3

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)
  @frontity/twentytwenty-theme

In that theme you have this structure…

.
├── CHANGELOG.md
├── 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
4

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!

4 Likes
6

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!

7

I’ve done announcing please check it in your feeds