Is it possible to load only specific components instead of all of the framework?

Instead of loading the whole framework (using React and Webpack/Parcel bundler) I want to load each component lazy loaded in each page. Only the core will be loaded on the initialisation and the component for the first page to load.

I have created a simple boilerplate GitHub repo so you can see:

Note the “src/bin/index.js” which is the starting point, it starts out with:

import Framework7 from ‘framework7/js/framework7-lite.bundle.min.js’
import Framework7React from ‘framework7-react’
import ‘framework7/css/framework7.bundle.min.css’

This immediately imports ALL of framework7 into the bundle, and make it weight around 1.5mb which is not needed for first page to load.

How to make it possible so only when specific modules are needed they will be load?

Also note that there is a lazy loaded which I have already enabled.

Isn’t possible to just import the core modules with react and package manager on first init and later load everything else as chunks?

  1. Use dynamic imports
  2. Enable optimization.splitChunks='all' in web pack config https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
  3. Use F7’s lazy modules https://framework7.io/docs/lazy-modules.html#modules-api
1 Like

Hey, thanks for your help, I hope I won’t nudge you too much…

But, could you please tell me what I am doing wrong?
In order to make it easier and not to waste your time, I have created a GitHub repo for it (see adding-f7 branch):

I want to implement few things for this simple boilerplate:

  1. Lazy load Framework7 modules and components, instead of loading ALL of it on bootstrapping.
  2. Allow/auto allow dark mode.
  3. Edit colours for all of the theme, so I have a new set of colours.
  4. Adding Icons.

How can I achieve these?

And I just noticed that by the time I add the “View” component, the HMR is dead.
I understand that a fix is not near now, isn’t it?

This

{
    name: "Home",
    path: "/",
    async: (routeTo, routeFrom, resolve) => {
      import('/routes/Home').then(page => {
        resolve({
          component: page.default
        })
      })
    }
  },

Can be simplified to this:

{
    name: "Home",
    path: "/",
    asyncComponent: () => import('/routes/Home'),
  },

This:

import Framework7 from 'framework7/js/framework7-lite.min.js'

should be

import Framework7 from 'framework7/framework7-lite.esm'

For better tree-shaking, which i believe Parcel doesn’t support well, you can change this:

import { App, View } from 'framework7-react'
import { Page, Navbar, Block, Button } from 'framework7-react'

to this

import App from 'framework7-react/components/app';
import View from 'framework7-react/components/view';
import Page from 'framework7-react/components/page';
import Navbar from 'framework7-react/components/navbar';
import Block from 'framework7-react/components/block';
// etc

And you need to also lazy install Framework7 core modules, for example, if your About.jsx uses Sarchbar and Accordion, then add these imports there:

import Framework7 from 'framework7/framework7-lite.esm';
import Searchbar from 'framework7/components/searchbar/searchbar.js';
import Accordion from 'framework7/components/accordion/accordion.js';
import 'framework7/components/searchbar.css';
import 'framework7/components/accordion.css';

Framework7.use([Searchbar, Accordion]);

Information about modules list is here
https://framework7.io/docs/lazy-modules.html

Can you PR? I got many errors doing what you say, for example asyncComponent: () => import('/routes/Home') not worked

Any update? I once again gained 1.5mb bundle… trust me the things I write in here are the most important things that F7 should have.

Smallest bundle as possible with chunks,
Hot reload is the key player.
Check the repo, I have tried lots of things really…

Check this for reference https://github.com/framework7io/framework7-appstore-react

1 Like