Code Splitting

Code Splitting — Is a feature supported by bundlers like Webpack and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

Can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.

Route-based code splitting

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

import()

import("./math").then(math => {
  console.log(math.add(16, 26));
});

The best way to introduce code-splitting into your app is through the dynamic import() syntax.

Related concepts

→
Code Splitting
→

Code Splitting — Structure map

Clickable & Draggable!

Code Splitting — Related pages:

Code-Splitting