brotzky / code-splitting-react-webpack

An example of how to code split with Webpack 2 and React Router

Code Splitting with React Router v3 and Webpack 2/3

An example of how to code split a React application using Webpack 2/3 and React Router v3.

Live Demo

Guide

There is an easy to follow guide to help you fully understand the concepts.

Step-by-step guide

Installation and Starting

git clone https://github.com/brotzky/code-splitting-react-webpack.git && cd code-splitting-react-webpack
yarn
yarn start
> visit localhost:3000

# or npm
npm install
npm start
> visit localhost:3000

Technology

The technology used for this example:

• React
• React Router v3
• Webpack 2 or 3
• Babel

Directory

The content you should focus on to get a better idea of what is going on.

code-splitting/
|   package.json
|
└───src/
│   │
│   └───modules/
│   |     Core.js
│   |     ...
│   |
│   └───root/
│   |     index.js
│   |
│   └───routes/
│   |     index.js
│   │ 
│   │ index.html
│   │ index.js
│   
│   
└───webpack/
      webpack-dev-server.js
      webpack.config.js

React Router v4

The React Router docs have a simple guide for code splitting

_{Made by Dennis Brotzky. If you need help please file an issue or contact me through twitter!}

code-splitting-react-webpack's Issues

Add ES6 sintax

I am triying to add "babel-preset-es2015": "^6.22.0", to add ES6 sintax to my code. But i try to add to my .babelrc

  "presets": [
    "react",
    "latest",
    "es2015"
  ],

but my project cant compile with ES6 sintax.

How can i implement es2015?

[Question] Deploying the app in production

This is not an issue with the repo. I am just asking my question. BTW, awesome repo man. A very good getting started guide to code-splitting.

1) I deploy my react app to AWS S3. It is comfortable for hosting the static website. In case of code-splitting app, how do we deploy it in production ?

So my directory structure for a basic react app without any code-splitting looks like this:

- index.html
- app.bundle.js
- app.css

I am just confused about the directory structure of code-splitting app in production.

2) What is the difference between commonChunkPlugin and vendor. I understand that vendor removes the code from app.js and contains the common modules, but I dont understand the relation between commonChunkPlugin and vendor.

3) Benefits of using vendor.js:

1. We will be updating our app.js time to time, but updating vendor.js is rare (compared to app, vendor updation is rare). We separate it so that the vendor maintains the same hash and app's hash changes so that the browser pulls the new app again, but not the vendor. Thus, reducing the payload and utilizing the cache performance. Is this the benefit or are they any other benefits too ?

If you feel this issue is not related to repo, please feel free to close the issue.

Uncaught error: Dynamic page loading failed: undefined

Thanks a lot for putting together the tutorial and example repo. It finally demystified the whole code-splitting business for me.

I was having the same problems as you with nested routes, but an easy fix is the following: change filename: '[name].[hash].js', to filename: '/[name].[hash].js', in your webpack.config.js - the slash makes it an absolute route and fixed the problem for me.

I'm also having an odd problem that seems to be coming from the errorLoading function. On certain routes, I'm getting the following error in my console:

Uncaught (in promise) Error: Dynamic page loading failed: undefined
    at errorLoading (app.js:2681:1), <anonymous>:16:9)errorLoading @ routes.js?6db9:5

There doesn't seem to be any undesired behaviour that I can find, but I don't understand why it's happening. Somehow the function is throwing an undefined error?

Any insights?

React-router v4

We are using React Router v4 in our app,
how could we implement this code splitting with it?

is there a way to achieve two level of routes? such like" <Route path='about/page' ... /> ?"

        <Route path="/about/page" getComponent = {(location, cb)=>{
            System.import('./components/About')
                .then(loadRoute(cb))
                .catch(errorLoading);
        } }/>

Merge conflict in yarn.lock file.

There is a Merge conflict in yarn.lock line 1968 in master.

Prevents yarn install.

loadRoute 2nd parameter in about page?

About page route is using:

      .then(loadRoute(cb, false))

All other pages are passing only the cb (as defined in the function definition).
Is that false argument really being used?

How should I compile the routes to [name].[chunk].js instead of [number].[chunk].js?

After compile the routes into '/dist', I want to know which one does each routes correspond to.