Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to separate js bundle #5399

Closed
Richard-Cao opened this issue Jan 19, 2016 · 41 comments
Closed

How to separate js bundle #5399

Richard-Cao opened this issue Jan 19, 2016 · 41 comments
Labels

Comments

@Richard-Cao
Copy link

@Richard-Cao Richard-Cao commented Jan 19, 2016

How to separate js bundle to frameworkBundle and appBundle?

js bundle is more 500k+, but business code is less then 10%

@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented Jan 19, 2016

@facebook-github-bot
Copy link

@facebook-github-bot facebook-github-bot commented Jan 19, 2016

Hey Richard-Cao, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!
@Creemli
Copy link

@Creemli Creemli commented Jan 19, 2016

Wow, I just wanna fix this issue, and have tried https://github.com/mjohnston/react-native-webpack-server/ but failed.

Also I tried to get a dev version bundle and copy the framework code as framework.jsbundle, but when I package the business code, I cannot analysis the correct dependencies.

Looking forward this solutions~~~~

@Creemli
Copy link

@Creemli Creemli commented Jan 19, 2016

@Richard-Cao IOS also have this issue~~

@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented Jan 19, 2016

@Creemli Looking forward……

@Creemli
Copy link

@Creemli Creemli commented Jan 19, 2016

@Richard-Cao Help to remove the [Android] tag and then more people can search this issue.

@Richard-Cao Richard-Cao changed the title [Android]How to separate js bundle How to separate js bundle Jan 19, 2016
@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented Jan 19, 2016

@corbt
Copy link
Contributor

@corbt corbt commented Jan 19, 2016

What's the purpose of splitting the bundle? Is it just to make incremental app updates lighter weight, or is there some runtime goal you're trying to accomplish?

@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented Jan 19, 2016

both @corbt

@corbt
Copy link
Contributor

@corbt corbt commented Jan 19, 2016

To help me understand the scope of this, what are the use cases for this beyond just making lighter-weight app updates (which I get)?

@Creemli
Copy link

@Creemli Creemli commented Jan 20, 2016

@corbt Yeah, this can make user download less code when updating.
And if we can separate them, we maybe not have to bundle the whole codes, we can combine any business project with the framework code, it's lighter, I think.

@satya164
Copy link
Collaborator

@satya164 satya164 commented Jan 20, 2016

I think @martinbigio was looking into this.

@martinbigio
Copy link
Contributor

@martinbigio martinbigio commented Jan 21, 2016

Yeah, we were looking into this mostly to help on TTI but decided to pursue another approach, namely unbundling. To make code downloading faster it's not actually necessary to have multiple bundles but to use a "more clever" protocol (i.e.: one that could send diffs only).

@hufeng
Copy link

@hufeng hufeng commented Jan 21, 2016

@corbt
Copy link
Contributor

@corbt corbt commented Jan 21, 2016

If the main use case for this is just to have smaller updates, then I don't think bundle-splitting is the best solution. There should just be some library that manages updating the JS bundle file using versioned diffs. Such a solution would perform strictly better than bundle-splitting in the size of the updates it would need to send, and would also require less user intervention (in deciding where to split the bundle) to get right.

This would probably make more sense in something like Code Push than in React Native core.

@jkrems
Copy link

@jkrems jkrems commented Apr 7, 2016

Another possible use is to lazy load parts of a (bigger) app at runtime to reduce startup time. Or is that unlikely to make a difference?

@dmendis
Copy link

@dmendis dmendis commented Apr 12, 2016

I can give an example of what is being talked about here.

I have a tabbed UI app that already has a bunch of native code already written (iOS and Android). React Native tabs exist side by side with other webview and native tabs. For this scenario, I am having to load all of the app code (core + tab 1 + tab 2 + tab 3) for each tab. Splitting the bundle would mean that:

  • the app kicks off tabs faster (TTI?)
  • some functionality that is rarely used can be directly loaded from a server without having to be pre-cached all the time
  • updating a tab doesn't mean I have to send few megs down the network each time (I understand some diffing protocol was suggested up in the thread)

Also, what is unbundling?

@dickeylth
Copy link
Contributor

@dickeylth dickeylth commented Apr 20, 2016

ref #570

@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented May 23, 2016

any solution?

@sheldonhan
Copy link

@sheldonhan sheldonhan commented Jul 29, 2016

any updates?

@Creemli
Copy link

@Creemli Creemli commented Aug 2, 2016

@christineRR
Copy link

@christineRR christineRR commented Aug 16, 2016

any progress?

@markzhai
Copy link

@markzhai markzhai commented Aug 22, 2016

looking forward to updates

@cangyue0322
Copy link

@cangyue0322 cangyue0322 commented Aug 29, 2016

Looking forward...and...what is unbundling?

@hzy00
Copy link

@hzy00 hzy00 commented Sep 14, 2016

@Creemli moles-packer only resolve the propblem separate js bundle, but how to load them in native module?

@mc-zone
Copy link

@mc-zone mc-zone commented Nov 2, 2016

Hi @martinbigio, @corbt,

Our guys have been develop APPs with RN Integration for a long time. And we think bundle-splitting is also usefull in these scenarios (maybe not limited to Integration).

  • Decrease initial time (Run base codes previously)
    If we could split some initial and definition codes to a _base.jsbundle_ and run it in JSContext previously before users really enter React Native partition, it can decrease user's waiting time .
  • Update partially
    Just like @Creemli said. If we just use a lock version RN(or update infrequently) , the most of changes and updates is about our business codes. We can also separate some framework code (i.e. React, RN Components, APIs, and even with some other framework) into a base bundle, but business codes in business bundle. So we can fetch business bundle standalone from network and get smaller size with download to hot update. Even without diff it's not too bad. I mean, maybe it's easier to implement than integrate a diff algorithm to the entire work flow.
  • Share common modules between multiple bundle
    If we had the _base.jsbundle_ like the above mentioned, we also can make multiple bundle share it as a common library (it's Just like DllPlugin usecase in webpack). Suppose we have two ReactRootView in our App, currently we should bundle out two _jsbundle_ files both independent and overall with base codes, it includes many duplicated.

Let me generalize my opinion through this picture:

(In order to save space, I omit the --platform, .ios, .android here)

image

This simple way seems like the DllPlugin in webpack:

  1. Compile-time

    Build _base.jsbundle. Meanwhile records it's dependecies list and save it, for example, named by _base.manifest.json (output to --manifest-output by cli).

    Build _index1.jsbundle_ with the _base.manifest.json_ passed through --manifest-file. When resolve modules, use their id from _base.manifest.json_ and skip their definition if they has recorded in the manifest. So a clear business bundle has done!

    Build antoher business bundle like the above (We can set a --id-prefix for module id to prevent override).

  2. Run-time

    Run _base.jsbundle_ in JSContext at a good time (e.g. Native App launch done, enter to a parent Activity/Controller ).

    Run _index1.jsbundle_ when user click/open and will enter to this React Native partition.

    Run _index2.jsbundle_ or other when user will enter to another React Native partition.

    Update business bundle from CDN if needed.

How do you think ? 😄

@njafei
Copy link

@njafei njafei commented Feb 4, 2017

android can try unbundle. this will separate mian.jsbundle into pieces of js files。

code like:
react-native unbundle --platform android --dev false --entry-file index.ios.js --bundle-output main.jsbundle

@jimzhao2012
Copy link

@jimzhao2012 jimzhao2012 commented Feb 24, 2017

@njafei unbundle is not a good design, too many small files in output bundles.
it's very easy to split main.jsbundle to base.bundle.js and business.bundle.js, but you need modify the native code for RN to load different parts.

@Richard-Cao
Copy link
Author

@Richard-Cao Richard-Cao commented Feb 24, 2017

@mc-zone Amazing!

@ckitterl
Copy link

@ckitterl ckitterl commented Mar 3, 2017

@jimzhao2012 I don't is a good idea to modify RN code. Mybe could eval business.bundle.js at base.bundle.js?

@yoution
Copy link

@yoution yoution commented Jul 5, 2017

I hava package react-native code using webpack,https://github.com/yoution/rn-pack ;also support hot load; and split code using commonChunk plugin,also can fix module id in chunk; but I do not know how to load the splited bundle

@Creemli
Copy link

@Creemli Creemli commented Jul 6, 2017

We are trying to load base bundle & business bundle in IOS, Android. I will update this when succeed using in production.

@jsdario
Copy link
Contributor

@jsdario jsdario commented Jul 31, 2017

@jimzhao2012 is there any resource to look deeper into it?
Also, how could we use and pack with unbundle? I can produce the unbundle files, but I don't know yet how to install and run the unbundle result and I don't find many resources on how to do it.

@fmnxl
Copy link

@fmnxl fmnxl commented Aug 30, 2017

For those who wants to try out unbundle, there's a PR documenting it:
https://github.com/facebook/react-native/pull/15317/files

@JasonHao123
Copy link

@JasonHao123 JasonHao123 commented Oct 15, 2017

I'm working on an existing app rewrite, to separate js bundles and hot reload are two important feature for me to investigate, reasons are:

  1. We are running agile approach, so would like delivery our artifact for each sprint, but deliver through app store/google play too often definitely is not good for commercial app. So we would like to deliver major version by store, minor version by hot deploy.
  2. splitting bundle is because inside the app, there are different modules developed under different project, and some function is not used quite often, for example help & service. to have separate bundle will reduce the dependency and decrease project risk, since we can deliver and replace modules separately

Beyond that, we are also interested in bundle encryption/decryption, and file patching, which makes it more useful for commercial app.

@zfha
Copy link

@zfha zfha commented Oct 19, 2017

+1 mark

@punksta
Copy link

@punksta punksta commented Oct 27, 2017

Also that can speed up ci/server-side builds. Most of builds has same versions of libs, only code of app changes. We can --reset-cache for app bundle only.

For example: we have project with 1200 npm packages. android ci build takes about 3m, ios 5. 80% of build time takes building of bunde.js

Also we can bundle it with two package processes to speed up.

@jsdario
Copy link
Contributor

@jsdario jsdario commented Oct 27, 2017

Would this be the equivalent to webpack DDL plugin? I made the following question in stackoverflow about the unbundle speed for rebuilds and I am interested in finding a guide to follow the same strategy for react-native.

Maybe it won't be possible for code-push updates or faster app initialization, but I am interested in improving the DX.

@stale
Copy link

@stale stale bot commented Dec 26, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale label Dec 26, 2017
@stale stale bot closed this Jan 2, 2018
@jjclose
Copy link

@jjclose jjclose commented Jan 10, 2018

I never saw a resolution of this issue. it's a very important question and a valuable use-case. unbundling is not a solution and not the same thing as splitting the framework from app. is anyone working on this?

@skizzo
Copy link

@skizzo skizzo commented Mar 2, 2018

Was anybody able to use unbundling in combination with CodePush?

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.