How to work with downloaded data for a mobile application?

Question

JavaScript

I am developing a recipe book (pet-project) on Ionic. Functionality: search for a recipe by name, adding to favorites, offline work. A practically bare application slows down a little on Android, in general it weighs a lot. I wondered how to increase the performance of the application, reduce the final size of the application's installation file, I see two ways:
1) When you first start the application, it urges you to download, in fact, the collection of recipes itself - the recipe json file that processes the Angular service -> a huge array of recipes (~20MB) hangs permanently in memory, won't it affect the overall performance?
2) Include in the application some module that, when the application starts, will deploy a local database on the phone. The business logic of the application will send requests to it and receive data -> there will be no lags
. Is it possible to implement one of these ways (or which one is more rational), how to do it?

Answer 1

The second option is better.
Load this file asynchronously first, put all the data in the local database and then make normal requests to them.
https://ionicframework.com/docs/native/sqlite/

Answer 2

Try all the recipes - put on disk inside the application as separate HTML markup files.
Then use includeHTML to navigate through the pages .