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.
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:
Lazy load Framework7 modules and components, instead of loading ALL of it on bootstrapping.
Allow/auto allow dark mode.
Edit colours for all of the theme, so I have a new set of colours.
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