transformer taking too much time!

[chandu0101]

I am using react-native with scala.js ,here is the gist of my index.ios.js (dont worry about huge code its just scalajs boiler plate) and package.json files.

transform statistics :

[12:20:44 PM] request:/index.ios.bundle?platform=ios&dev=true (700ms)
[12:20:58 PM] find dependencies
[12:20:59 PM] find dependencies (443ms)
[12:20:59 PM] transform transforming [========================================] 100% 524/525
[12:21:05 PM] request:/index.ios.bundle?platform=ios&dev=true transforming [========================================] 100% 525/525 [12:21:24 PM] transform (25137ms)
[12:21:24 PM] request:/index.ios.bundle?platform=ios&dev=true (19293ms)

it took almost ~20 seconds to transform for simple hello world project with no external deps.

is it because babelTransformer taking too much time to analyze google closure generated output! ? if yes can we bypass this because we don't need any babel magic on our file(its already in ES5)!

packager experts can you please through some light on this ..

cc @vjeux

[ide]

Are you using npm3? It makes your node_modules much faster at runtime by deduping deps.

[chandu0101]

yeah i am using node 5.0 and npm 3.3.6 , i suspect issue is with my scala.js -> google closure generated output !

[ide]

You can provide a custom .babelrc file and include only the transforms you need. I'm not sure which transforms those are (maybe you don't need any transforms) but it could speed things up considerably in your case.

[chandu0101]

@ide thanks for your reply i'll play with it and will post results here :)

[ide]

Sure thing, also I believe there's an option in the packager to specify a path to a custom transformer (search for a file called transformer.js inside of the RN repo to learn the API that you'd have to implement). This should give you a lot of control over how the code is transformed.

[chandu0101]

@ide I modified transformer.js function transform(src, filename, options)

 const result = babel.transform(src, babelConfig);
                           |
                          To
 const result = filename.indexOf("index.ios.js") > -1 ? {code : src}  : babel.transform(src, babelConfig);

its working fine for now , can i achieve same thing without touching node_modules/* stuff!

[ide]

Yes, the packager server accepts a --transformer flag that takes in a path to your custom transformer. So copy transformer.js into your project, make your changes, and then tell the packager about it with --transformer: https://github.com/facebook/react-native/blob/master/local-cli/server/server.js#L56.

[satya164]

You could move the scalajs code to a different file and ignore it using .babelignore. Not sure if it'll improve performance, but worth a try.

[chandu0101]

Yes, the packager server accepts a --transformer flag that takes in a path to your custom transformer. So copy transformer.js into your project, make your changes, and then tell the packager about it with --transformer: https://github.com/facebook/react-native/blob/master/local-cli/server/server.js#L56

@ide looks like it requires alot more work i'll add it my todo list , anyway thanks alot for your help, new transform times ~ 2 seconds ( even for my 5MB scala.js development mode output) :)

You could move the scalajs code to a different file and ignore it using .babelignore. Not sure if it'll improve performance, but worth a try.

@satya164 it requires changes in my build script i'll try that and will let you know :)

closing this issue as we have decent workaround thanks guys , react-native OSS ❤️ 💯

[chandu0101]

@satya164 i used your trick and it worked until 0.41, but in 0.42 its failing #12695 , any idea how to overcome this .. (my guess is new source-map support is the root cause here) :S