diff --git a/docs/docs/api/is-cached.md b/docs/docs/api/is-cached.md index 3f68dd9..ddd19aa 100644 --- a/docs/docs/api/is-cached.md +++ b/docs/docs/api/is-cached.md @@ -10,4 +10,4 @@ Call this function if you need to check whether the component was already loaded `isCached(componentName: string)` => `boolean` -- `componentName` - name of the component/screen that was registered in `register` function \ No newline at end of file +- `componentName` - name of the component/screen that was registered in `register` function diff --git a/docs/docs/api/preload.md b/docs/docs/api/preload.md index de371ae..a9e7c80 100644 --- a/docs/docs/api/preload.md +++ b/docs/docs/api/preload.md @@ -13,4 +13,4 @@ You can select what you'd like to load: - `preload().group(groupName: string)` => `Promise` - - `groupName` - name of your group, that was specified in `register` function \ No newline at end of file + - `groupName` - name of your group, that was specified in `register` function diff --git a/docs/docs/api/register.md b/docs/docs/api/register.md index 3af017f..5763adb 100644 --- a/docs/docs/api/register.md +++ b/docs/docs/api/register.md @@ -15,4 +15,4 @@ Params: - `group` (optional) - You need specify it, only if you need to `preload` entire group of screens - `static` (optional) - all static members from your presentational component. - `cached` (optional) - Default: `true`. Set to `false` if you don't need cache your screens. _**Warning:**_ it may decrease performance of your application. -- `placeholder` (optional) - React component which will display during screen loading. Should specify if you don't use `preload` for this screen. \ No newline at end of file +- `placeholder` (optional) - React component which will display during screen loading. Should specify if you don't use `preload` for this screen. diff --git a/docs/docs/fundamentals/basic-usage.md b/docs/docs/fundamentals/basic-usage.md index 01027d9..83a3921 100644 --- a/docs/docs/fundamentals/basic-usage.md +++ b/docs/docs/fundamentals/basic-usage.md @@ -65,4 +65,4 @@ class App extends PureComponent { ``` Usually your output from log will look like `Bundle Info: { loaded: 2731, waiting: 141 }`. Such way allows to understand is your changes make sense or not. After adding new screen to this library count of loaded files should be decreasing. Of course, ideal way is when you load as minimum modules as you can. For example only one page with login. In this case your startup time will be almost the same as just created application. And splash screen will not take a lot of time. -But it depends absolutely on you and yours architecture solutions. Feel free to play around this library and find suitable way for separating your files. \ No newline at end of file +But it depends absolutely on you and yours architecture solutions. Feel free to play around this library and find suitable way for separating your files. diff --git a/docs/docs/fundamentals/enabling-ram-bundle.md b/docs/docs/fundamentals/enabling-ram-bundle.md index b7de643..c69f1b9 100644 --- a/docs/docs/fundamentals/enabling-ram-bundle.md +++ b/docs/docs/fundamentals/enabling-ram-bundle.md @@ -57,7 +57,7 @@ You can choose between formats, since Android support both format (indexed and f ::: :::caution Hermes enabled -If you are trying to enable this feature with Hermes engine, you may faced with application crash. It's a known [issue](https://github.com/facebook/react-native/issues/25730). As a temporary solution you can don't activate this bundle format for Android, since Hermes is using similar [mechanism](https://github.com/facebook/react-native/issues/25730#issuecomment-514115115). +If you are trying to enable this feature with Hermes engine, you may faced with application crash. It's a known [issue](https://github.com/facebook/react-native/issues/25730). As a temporary solution you can don't activate this bundle format for Android, since Hermes is using similar [mechanism](https://github.com/facebook/react-native/issues/25730#issuecomment-514115115). ::: ### iOS diff --git a/docs/docs/fundamentals/getting-started.mdx b/docs/docs/fundamentals/getting-started.mdx index 7b6ea4d..45432fd 100644 --- a/docs/docs/fundamentals/getting-started.mdx +++ b/docs/docs/fundamentals/getting-started.mdx @@ -8,11 +8,16 @@ sidebar_position: 1 Splitting your bundle into small pieces allows you reduce size of main bundle, which is loaded on application startup. It means, that you can load only necessary things, such as login pages, which user inevitably will see if open an application. And only "necessary" things will be in main bundle. Thus, this means that **the time of initial launch of the application will be minimized** and **memory consumption will be decreased**, since often in applications is a lot of code (components and screens) that the user may simply not see. -import BundleSplittingImageUrl from '@site/static/img/bundle-splitting.png'; - -

- - On green part of this picture, you can see that all components/screens are divided into different groups. It allows you to load the application much faster, because instead of loading the entire bundle (red picture), you can load only the parts that you need. +import BundleSplittingImageUrl from "@site/static/img/bundle-splitting.png"; + +

+ + + On green part of this picture, you can see that all components/screens are + divided into different groups. It allows you to load the application much + faster, because instead of loading the entire bundle (red picture), you can + load only the parts that you need. +

## What does this package do? @@ -24,7 +29,9 @@ This package is built on top of **RAM** bundles. In addition to the base functio - and has web support. ## Features + This library is add-on on react-native API. But this library has some features, and here is list of them: + - **Enhanced cache management**. This library provide a way for caching yours components. This mechanism allows you to improve performance of your application and help to avoid unnecessary reloading yours components, which were already loaded. - **Ability to preload component**. You can preload components in background, which user may see in the nearest future. It allows to make UI experience more smooth and use your components from cache without any intermittentions. - **Supporting all navigation libraries**. This library is compatible with all most known navigation libraries, such as [react-navigation](https://reactnavigation.org/), [react-native-navigation](https://wix.github.io/react-native-navigation/#/) and more others. @@ -42,5 +49,5 @@ yarn add react-native-bundle-splitter This module does not use any native (platform) dependencies and does not need to be linked. So installation process basically is finished. But you also need to enable `RAM bundles` feature in your application. To see how to do it, please read [the guide](./enabling-ram-bundle). :::tip Minimal react-native version -You need to use react-native 0.59 or higher, since feature with inline requires is available out-of-box only from this version. +You need to use react-native 0.60 or higher, since feature with inline requires is available out-of-box only from this version. ::: diff --git a/docs/docs/guides/async-loading.md b/docs/docs/guides/async-loading.md index a275d39..732532f 100644 --- a/docs/docs/guides/async-loading.md +++ b/docs/docs/guides/async-loading.md @@ -128,4 +128,4 @@ So, what are you doing here? Instead of specifying `name` and calling `preload() This library does not do any magic. It simply allows you to transfer the time (which is required to load the bundle at the start of the application) to runtime execution. -This way you can load additional parts of the application when doing other asynchronous operations (such as HTTP calls, reading data from storage, etc.) and reduce initial load times. \ No newline at end of file +This way you can load additional parts of the application when doing other asynchronous operations (such as HTTP calls, reading data from storage, etc.) and reduce initial load times. diff --git a/docs/docs/guides/metro.md b/docs/docs/guides/metro.md index e90ca46..d260284 100644 --- a/docs/docs/guides/metro.md +++ b/docs/docs/guides/metro.md @@ -76,4 +76,4 @@ I recommend to repeat this operation several times (restart `metro`, copying/pas :::info New cycle dependencies It's fine if you start receiving warnings, that cycle dependencies were detected. Since you are loading modules lazily - bundler can not compute all dependencies tree in advance and build it in optimized way, so you will have to resolve it yourself manually and break cycle dependencies. -::: \ No newline at end of file +::: diff --git a/docs/docs/guides/navigation.md b/docs/docs/guides/navigation.md index ff92be6..7b414b3 100644 --- a/docs/docs/guides/navigation.md +++ b/docs/docs/guides/navigation.md @@ -158,4 +158,4 @@ As you saw in both cases (integration with `react-navigation` and `react-native- :::tip As you can see in this section we used `register` function directly in the navigation declaration, unlike [Basic usage](../fundamentals/basic-usage.md), where we used `register` in the `index` file. You can choose which way is more preferable for you: use this HOC in the routes declaration or in `index` files. No need to use it twice. -::: \ No newline at end of file +::: diff --git a/docs/docs/guides/static-options.md b/docs/docs/guides/static-options.md index fc49b49..b56e037 100644 --- a/docs/docs/guides/static-options.md +++ b/docs/docs/guides/static-options.md @@ -59,4 +59,4 @@ class HomeScreen extends React.Component { /* render function, etc */ } -``` \ No newline at end of file +``` diff --git a/docs/docs/guides/upgrading-from-1.x.md b/docs/docs/guides/upgrading-from-1.x.md index 665275a..969e3bd 100644 --- a/docs/docs/guides/upgrading-from-1.x.md +++ b/docs/docs/guides/upgrading-from-1.x.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # Upgrading from 1.x @@ -32,4 +32,4 @@ If you used the API of the library correctly before, then there will be no chang However, after updating to newest version you will get warnings, about the fact, that you should use **`loader` instead of `require`**. -If you want ot get rid off of that, you can do a quick migration. Just replace next expression `require: () => require(` to `loader: () => import(` expression. All modern IDEs allow you to do it for all project. That's all. Congratulations 🎉 \ No newline at end of file +If you want ot get rid off of that, you can do a quick migration. Just replace next expression `require: () => require(` to `loader: () => import(` expression. All modern IDEs allow you to do it for all project. That's all. Congratulations 🎉 diff --git a/docs/docs/guides/upgrading-from-2.x.md b/docs/docs/guides/upgrading-from-2.x.md new file mode 100644 index 0000000..f79ba04 --- /dev/null +++ b/docs/docs/guides/upgrading-from-2.x.md @@ -0,0 +1,20 @@ +--- +sidebar_position: 6 +--- + +# Upgrading from 2.x + +## Breaking changes + +Fortunately, this release is fully backward compatible with the `2.x.x` release. The only thing is that minimal supported version of React Native was raised to `0.60.0`. + +## Key changes + +- the library now uses `Suspense` component internally, so in future it'll be easier to adopt concurrent react features. +- internally the cache layer was migrated from `Object`s to `Map`s, which in turn should improve the performance a little bit. + +## Migration + +I believe that for all projects that are using this library, there will be no changes and you can simply bump the version of the library in `package.json` to `3.x.x`. + +If you use `react-native` version `0.59.x` then you should stick to `2.x.x` version of the library. diff --git a/docs/docs/recipes/bundle-analysis.md b/docs/docs/recipes/bundle-analysis.md index 906ea03..0137dc0 100644 --- a/docs/docs/recipes/bundle-analysis.md +++ b/docs/docs/recipes/bundle-analysis.md @@ -32,11 +32,13 @@ After installation edit your `package.json`: And then run analyzer: - In one terminal: + ```bash react-native start ``` - In the second terminal + ```bash yarn run bundle:analysis # or with npm @@ -76,4 +78,4 @@ Thus, by explicitly specifying common dependencies for some packages, you can av ## Summary -The main goal of this article is to demonstrate a way for determining the order and prioritizing thing where you should work. Via visualization of bundle you can understand, what exactly may slow down your startup of an application and understand possible way for resolving it. \ No newline at end of file +The main goal of this article is to demonstrate a way for determining the order and prioritizing thing where you should work. Via visualization of bundle you can understand, what exactly may slow down your startup of an application and understand possible way for resolving it. diff --git a/docs/docs/recipes/capturing-startup-time.md b/docs/docs/recipes/capturing-startup-time.md index 05c014a..4df77ef 100644 --- a/docs/docs/recipes/capturing-startup-time.md +++ b/docs/docs/recipes/capturing-startup-time.md @@ -87,4 +87,4 @@ As an example I can show you the performance table from the last project, which As you can see the difference in startup time is ~500ms for **Android** and ~700ms for **iOS**. -But it doesn't mean, that for your application results will be the same. Each application and each platform is universal - it has own structure and business logic, so there is only one 100% way to know what is the boost of performance you may get - try to integrate this library to your project and see the results. \ No newline at end of file +But it doesn't mean, that for your application results will be the same. Each application and each platform is universal - it has own structure and business logic, so there is only one 100% way to know what is the boost of performance you may get - try to integrate this library to your project and see the results.