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 #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 ***@***.***> 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 <#1056 (comment)>, 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: #1968 (comment).

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.