Code splitting increases entry bundle size when using create-react-app

Question

Here is the relevant code before manual code splitting:

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Protected from '../container-components/authentication/protected.js';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';

  render(){
    if(this.state.isLoading){
      return(
        <div>
          <Loader style={{marginTop: '30vh'}} active inline='centered'/>
        </div>
      )
    }
    return(
        <BrowserRouter>
            <div>
              <Switch>
                <Route
                  path='/stream'
                  render={(props) =>
                    <Protected {...props}
                    isLoggedIn={this.state.isLoggedIn}
                    onLogout={this.handleLogout}
                    user={this.state.user}
                    />
                  }
                />
                <Route
                  path='*'
                  render={(props) =>
                    <LoginContainer {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogin={this.handleLogin}
                    />
                  }
                />
              </Switch>
            </div>
        </BrowserRouter>
    )

here is the code after code splitting:

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';
import Loadable from 'react-loadable';

const LoadableProtected = Loadable({
  loader: () => import('../container-components/authentication/protected.js'),
  loading: Loader,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props} />
  }
})

  render(){
    if(this.state.isLoading){
      return(
        <div>
          <Loader style={{marginTop: '30vh'}} active inline='centered'/>
        </div>
      )
    }
    return(
        <BrowserRouter>
            <div>
              <Switch>
                <Route
                  path='/stream'
                  render={(props) =>
                    <LoadableProtected {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogout={this.handleLogout}
                      user={this.state.user}
                    />
                  }
                />
                <Route
                  path='*'
                  render={(props) =>
                    <LoginContainer {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogin={this.handleLogin}
                    />
                  }
                />
              </Switch>
            </div>
        </BrowserRouter>
    )
  }

I've also tried the tutorial here: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

which seems to be the same thing that react-loadable is doing.

I'm using webpack v4 with an ejected create-react-app and the following babel packages / plugins:

"@babel/cli": "^7.2.0" "@babel/plugin-proposal-class-properties": "^7.2.1" "@babel/plugin-proposal-export-default-from": "^7.2.0" "@babel/preset-env": "^7.2.0" "acorn": "^6.0.4" "babel-eslint": "^9.0.0" "babel-plugin-dynamic-import-node": "^2.2.0" "babel-plugin-lodash": "^3.3.4" "babel-core": "^6.26.3", "babel-jest": "20.0.3", "babel-loader": "^8.0.4", "babel-preset-react-app": "^6.1.0", "babel-runtime": "*",

it's not such a big deal that it isn't reducing the bundle size, i just can't seem to figure out why this is the case.

ldruskis ldruskis · Accepted Answer · 2019-08-02T11:47:14

Maybe you can try TerserPLugin, to minimize JS?

  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },

Source: https://github.com/webpack-contrib/terser-webpack-plugin

Code splitting increases entry bundle size when using create-react-app

1 Answers