CODEWITHSUNDEEP
reactjsbrowserifywebpackreact-router
svenhornberg
svenhornberg

Reputation: 15756

React +(Router) without webpack or browserify

Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot.

So is it possible to get reactrouter working with including compiled JS from a CDN like https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, instead of bundle all requirements by myself ? If i try to make it work with a CDN, I get an error that Route is not defined. But it looks like it is exported in the cdn file.

I would like to compile my JSX/ES6 react components include the ReactRouter and react JS-files from a cdn and only bundle my components into a new js file.

Is this possible or is browserify and webpack the right way to setup the project ? (I looked at several github repos). I got some doubts because there is no installation guide on http://rackt.github.io/react-router/

like this pseudo html:

<head>
    CND :include react, react-router
    my code combinded.js
</head>

Upvotes: 6

Views: 2864

Answers (2)

svenhornberg
svenhornberg

Reputation: 15756

One additional info I want to share is the possibility to use externals (https://webpack.github.io/docs/library-and-externals.html) in webpack config. I use it as following: 

externals: {
  "react": "React",
  "react/addons": "React",
  "reflux" : "Reflux"
}

this results in a smaller bundle and you can use react from a CDN as asked in my question. This also decreases the buildtime with gulp.

Upvotes: 2

Michelle Tilley
Michelle Tilley

Reputation: 159095

When you're using the prebuilt version from the CDN, the library is exported onto window.ReactRouter. So, Route is defined on window.ReactRouter.Route.

Since React Router also depends on React, using the CDN/browser build will also require that React is available on window.React.

That said, the CDN version you linked to is, itself, generated with webpack, so I don't expect that you'd gain any file size improvements. You might look into minification/dead code elimination on your browserify bundle to see if it decreases the file size.

Upvotes: 2

Related Questions