Apologies if this a well covered topic, I could not find good recent docs on the topic. Let’s say I’ve a classic configuration like
router.js:
import { FlowRouter } from 'meteor/meteorhacks:flow-router';
import { ReactLayout } from 'meteor/kadira:react-layout';
import LandingPage from './components/LandingPage';
import TodoApp from './components/TodoApp';
FlowRouter.route('/', {
action() {
ReactLayout.render(LandingPage);
}
});
FlowRouter.route('/app', {
action() {
ReactLayout.render(TodoApp);
}
});
and 2 components that share some ressources:
LandingPage.jsx
:
import { Component } from 'react';
import utils from './utils.js';
export default class LandingPage extends Component { ... }
TodoApp.jsx
:
import { Component } from 'react';
import utils from './utils.js';
export default class TodoApp extends Component { ... }
How would I go with using webpack to do code splitting so that only LandingPage.jsx
or TodoApp.jsx
gets loaded at first with its dependencies, and that the not yet loaded code gets loaded when I navigate to the other route?
https://github.com/thereactivestack/kickstart-meteor-react-flowrouter gives a good introduction on how to get started with Meteor + React + webpack, but not on code splitting. Since Meteor 1.3 already offers a number of things that make webpack attractive (modules etc) it seems that code splitting is, with component hot reloading, one of the two main reasons to use webpack today.
I agree, that flexible file structure (without any limitations of using imports
directory is one of few things why I still want to use webpack in my new Meteor 1.3 project. Would be interested on others experience with it.
Sorry for reviving this old topic but I was searching info about doing code splitting with webpack:webpack and found this thread. Then decided to investigate a bit further and found one way of getting it to work.
Here is an example of using code splitting to load admin components only when accessing the admin route:
import React from 'react';
import {mount} from 'react-mounter';
let adminRoutes = FlowRouter.group({
prefix: '/admin',
name: 'admin'
});
adminRoutes.route('/', {
action() {
require.ensure([], require => {
const {Layout, Dashboard} = require('admin');
mount(Layout, {
content: (props) => (
<Dashboard {...props} />
)
});
});
}
});
That require.ensure()
will tell Webpack to code split what’s required inside to a different bundle. ‘admin’ is an index file importing the various components I need to render my admin dashboard (Layout, Dashboard).
I haven’t tried this in production but it works in development and on my staging machine with SSR.
Hope this helps getting you started.
2 Likes
Excellent. And I could have answered it myself since I ended up figuring it out. Here is a skeleton project I put together that demonstrates webpack + code splitting + SSR if that helpful for other who end up on that thread: https://github.com/gsabran/kickstart-meteor-react-flowrouter-SSR-codeSplit