Framework7 Lazy‑Loading Pages: Reducing Bundle Size and Startup Time in Hybrid Mobile Apps

Problem and Takeaway

When a hybrid mobile app using Framework7 loads, the initial JavaScript bundle can become large, causing slow first paint on low‑end devices. The useful takeaway is that Framework7’s router‑based lazy loading lets you split the bundle into separate chunks that are fetched only when the corresponding route is visited, improving startup time without extra native code.

Requirements

• Load page code only after the route is selected.
• Keep the main bundle small enough for fast first paint.
• Show a loading indicator while the chunk is being fetched.
• Handle navigation failures (missing or failed chunk) without showing a blank screen.

Smallest Suitable Design

The minimal architecture uses the Framework7 router with an asynchronous import for each page component. No additional libraries or custom routing logic are required; the router automatically splits the bundle when the import is marked as dynamic.

Trust and Data Boundaries

The router trusts the server to deliver the required chunk. If the server returns a 404 or a network error, the navigation promise rejects. Your code must provide a route error callback to catch these failures and display a graceful message or retry UI.

Operational Checks

After building the app in production mode, verify the behavior with the following steps:

1. Open Chrome DevTools and navigate to the Network tab.
2. Refresh the app and then navigate to a lazy‑loaded route (e.g., /about).
3. Observe that a new request appears for a separate chunk file (e.g., 0.js) after the initial bundle request.
4. Confirm that the chunk size is noticeably smaller than the main bundle (typically 30‑70 KB versus several hundred KB).
5. Check that a preloader or custom loading indicator appears while the request is in flight.

Concrete Example – Configuration

Assume a Vue‑based Framework7 project created with the CLI. The router configuration looks like this:

// router.js
import { createRouter } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';

export default createRouter({
  routes: [
    { path: '/', component: Home },
    {
      path: '/about',
      component: () => import('../pages/About.vue')   // ← lazy‑loaded
    }
  ]
});

The async import tells webpack (or Vite) to split About.vue into its own chunk that is requested only when /about is visited.

Diagnostic Decision – Handling Errors

If the chunk request fails, the router will reject the navigation and the UI may stay on a blank page. To prevent this, register an error handler:

router.onError((error, from, to) => {
  // error may be a network error or a missing chunk
  // show a toast or redirect to a fallback page
  console.error('Navigation error:', error);
});

Place this code after router creation; it runs in the browser context and has no special permissions beyond normal JavaScript execution.

Limitations and Conditions that Change the Design

• Multiple lazy routes increase the number of HTTP requests. If the server lacks HTTP/2 push or a service worker cache, cold‑start latency can rise.
• Large individual chunks may still exceed the desired bundle size; consider code‑splitting deeper (e.g., per‑component) if needed.
• If the app uses server‑side rendering (SSR), lazy loading must be coordinated with the SSR bundle to avoid hydration mismatches.

Verification Checklist

1. Build with production mode: npm run build --mode production (requires write permission to the project directory).
2. Serve the built files via a local server (e.g., npx serve dist) to mimic a real HTTP response.
3. Open Chrome DevTools → Network, disable cache, and throttle network to “Slow 3G”.
4. Navigate to a lazy route and verify:
• A separate chunk request appears.
• The chunk file name follows the pattern 0.js, 1.js, etc.
• The chunk size is < 100 KB.
• A preloader (default spinner or your custom component) is visible during the fetch.
5. If any check fails, inspect the webpack/Vite configuration for missing optimization.splitChunks or incorrect publicPath settings.

Conclusion

Framework7’s router‑based lazy loading provides a straightforward way to reduce initial bundle size and improve startup time in hybrid mobile applications. By ensuring proper asynchronous imports, handling navigation errors, and verifying chunk requests with the steps above, you can achieve faster first paint while maintaining a reliable user experience. The approach works with Vue, React, or Svelte plugins and requires only Framework7 CLI v5+ or a manual webpack/vite setup.