Webpack:webpack code splitting with Meteor 1.3 - ES6

help
1

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.

2

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.

3

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
4

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