4

I'm trying to bundle a simple reactjs app using JSPM's built-in bundling API but it results to a very large file.

Here's my sample code:

import React from 'react';

class Main extends React.Component {  
  render() {
    return <div>Hello World</div>;
  }
}

React.render(<Main />, document.getElementById('main'));

I perform the bundling with this command:

jspm bundle-sfx app/main build/main.js

The resulting file is 888kb unminified, and 461kb minified. How do you go about properly bundling a React app with JSPM so it won't result in such an unnecessarily large file.

EDIT:

I've considered excluding reactjs from bundling which works fine, but when I start using reactjs-dependent libraries like react-router, it's back to including reactjs to the bundle.

oragorn
  • 181
  • 1
  • 7
  • 1
    ReactJS is a very large framework, even minified. You could exclude it from the bundle and just reference the file from a CDN (https://github.com/facebook/react#installation) – WiredPrairie Jun 01 '15 at 14:19
  • 1
    How do you `require` from CDN with JSPM? The [docs](https://github.com/systemjs/systemjs/wiki/Production-Workflows) mentioned `depCache` but didn't explain. As a workaround I created a buffer module which exports `window.React`. – oragorn Jun 02 '15 at 05:20
  • I've never tried it, but excluding from the bundle documented here sounds right: https://github.com/jspm/jspm-cli/wiki/Production-Workflows – WiredPrairie Jun 02 '15 at 10:38
  • It works without loading transpiler into the browser https://stackoverflow.com/questions/32467381/can-i-use-jspm-without-a-transpiler – rofrol Oct 01 '15 at 12:19
  • Possible duplicate of [Reduce Size of Large, React based Single Page Application's Browserify Bundle File](http://stackoverflow.com/questions/34894876/reduce-size-of-large-react-based-single-page-applications-browserify-bundle-fi) – Paul Sweatte Sep 06 '16 at 13:48

0 Answers0