Create-react-app: Code Splitting Support

[donnieflorence]

Is it viable to support Code Splitting with CRA?

[gaearon]

It's already supported with require.ensure. We don't document that because we're waiting until Webpack 2 is ready. When it's ready, we'll switch to it and document System.import() instead.

[gaearon]

Please see https://github.com/facebookincubator/create-react-app/issues/1192 if you'd like to help!

[denkristoffer]

Is this possible now?

[chemitaxis]

Hi, any news about that? Thanks!

[Timer]

A 0.10 alpha will be out soon with import support. In the mean time, you can use require.ensure. Simply polyfill it in your test environment.

[chemitaxis]

Sorry, but what do you mean with polyfill it in the test environment? Thanks

[Timer]

Sorry I wasn't more clear.

Currently, you can use require.ensure in dev & prod and it will work fine.

If you want it to work in Jest (npm test) you will need to add something like this to index.js:

if (process.env.NODE_ENV === 'test') {
  require.ensure = (deps, cb) => cb(require);
}

[chemitaxis]

Ah ok! If I understand good, I can not test in this moment require.ensure, I
need to change it by sync require, not? Thanks!
On Thu, 16 Mar 2017 at 23:22, Joe Haddad [e-mail] wrote:

Sorry I wasn't more clear.

Currently, you can use require.ensure in dev & prod and it will work fine.

If you want it to work in Jest (npm test) you will need to add something
like this:

if (process.env.NODE_ENV === 'test') {
require.ensure = (deps, cb) => cb(require);
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/1056#issuecomment-287209174,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABWseXQlAN22FY37QPRs1X2RGqiZvhbmks5rmbZBgaJpZM4K1qO9
.

[Timer]

I'm not sure I understand, sorry!

[GautierT]

Do you have any ressources/tutorial to install code splitting on a CRA app with react-router ?
Can't find anything without webpack config... Thanks !

[gaearon]

This is not using React Router but should give you an idea: https://github.com/facebookincubator/create-react-app/issues/1968#issuecomment-293256852.

I’m not really sure why you can’t find examples without webpack config changes because code splitting in webpack works out of the box. So it’s not necessary to change anything.

[GautierT]

Thanks @gaearon but even after putting my route this way :

    return (
        <Route path="/" getComponent={(location, callback) => {
            require.ensure([], (require) => {
                callback(null, require('./containers/Parent').default)
            }, 'Parent')
        }}>
            <Route path="/cgu" getComponent={(location, callback) => {
                require.ensure([], (require) => {
                    callback(null, require('./containers/CGU').default)
                }, 'CGU')
            }}/>
            <IndexRoute getComponent={(location, callback) => {
                require.ensure([], (require) => {
                    callback(null, require('./containers/Home').default)
                }, 'HomePage')
            }}/>

            <Route path="/authCallback" getComponent={(location, callback) => {
                require.ensure([], (require) => {
                    callback(null, require('./containers/AuthCallback').default)
                }, 'Auth')
            }}/>
            <Route path="/produit" getComponent={(location, callback) => {
                require.ensure([], (require) => {
                    callback(null, require('./containers/landing/Produit').default)
                }, 'Produit')
            }}/>

        </Route>

        )

I still see only one js chunk...

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  541.27 KB (+17 B)  build/static/js/main.65e37619.js
  93.09 KB           build/static/css/main.9751ff5b.css

[gaearon]

Please provide a full project reproducing the problem.

[a-x-]

what about import('package').then(package => {})?

it's more convenient rather than require.ensure for my taste

"react-scripts": "^0.9.5"

webpackHotDevClient.js:233 Error in ./src/pages/new-account.jsx
Syntax error: Unexpected token, expected { (12:6)

  10 | };
  11 | 
> 12 | import('../data/account-parts-tree.json').then(accountPartsTree => {console.log('tree', accountPartsTree)})
     |       ^
  13 | 
  14 | export default class NewAccount extends Component {
  15 |   constructor(props) {

[Timer]

@a-x- using import() is only available on 0.10. You can upgrade to the alpha if you'd like to start using it now.

Please note CSS isn't minified in that alpha.

[Viral-Inc]

if anyone has an update on the timing of the official switch to System.import() please let me know :) :)

[armand1m]

I'm trying to use import() using [email protected] but I've got the same error as @a-x-

I'm trying to go according the docs about this.