I have javascript file that looks like below. It has lots of object (1000+). As we cannot use dynamic name for images in react-native this is my work around.
"grinning": {
"image": require('./images/1f600.png'),
"shortname": ":grinning:",
}
I am requiring this file in some other react native function and looping to display all the images. But getting internal error on requiring too many images in javascript file.
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for details"}
In terminal it says
fs operation timeout
This works if i remove few entries from the file.
Any suggestion or better approach
There are known issues with the Fresco library in charge of handling images, and memory limits:
Memory issues with PNG images
React Native Android depends on Fresco
for loading and displaying images. Currently we have disabled
downsampling because it is experimental, so you may run into memory
issues when loading large PNG images.
So maybe try compressing your images if you can, and only require them when they have to be rendered.
You should also check the bug tracker. Here is a comparable issue and its fix:
#phones24 wrote:
I optimized my app so it's not cached too many images. I also added
some more JPEG compression and scale the images down a bit. I also
wrote a path that adds error information to the event.
Related
I just added a library called libsodium.js to handle certain crypto functionality I need to support. The problem is that it increased my build size tremendously. I'd really like to cut out the parts I'm not using, but the library doesn't seem to support selective imports. I filed a ticket with the code manager, but I don't know when or if that'll be addressed. In the meantime, what can I do to reduce the size of my webpack build as it's presently over 1MB in size.
Repo is here: https://github.com/ava-labs/slopes
Thanks!
How might an old (4+ years) cordova setup load images and documents for display to a user?
Moving to the current Cordova has broken the display of images and documents, but I can't see where I should be looking to fix this. There's a javascript function called fetchFile() which looks promising, but this returns an error and says the file is not available (for .jpg, .pdf and .doc), but I can't see where it would be getting it from. Can anyone suggest where I should look?
Some (but not all) files used the ExternalFileUtil plugin, but the only other plugins I can see are BarcodeScanner and SQLite plugins
I am developing pretty big SPA (final ~30MB) and unfortunately one of requirements is that an app has to be released as one big html file. I use webpack to connect all pieces together.
Currently I am facing a problem with performance (some libraries are quite big ones). They "eat" a lot of ram and affects loading time due to code evaluation in browser. I would like to postpone it and evalute only these modules which are necessary at main screen of app.
My idea is to use the same mechanism like webpack does for sourcemaps:
https://webpack.js.org/configuration/devtool/ (eval-source-map)
Webpack simply puts code within eval("code of module") which prevents automatic evaluation by Javascript engine. Of course this code can't be minified and there is also sourcemap attached as base64 to the end. I would like to do same without sourcemaps and including uglification. Moreover I have an idea to reduce size of application by compressing sources so eventually it would be eval(gz.decompress("code of module")).
It will be a huge change in application so before I am going to reinvent a wheel I would like to ask you:
Does it make sense from problem point of view?
Do you know any existing solutions?
Do you suggest to use any existing components from webpack like:
https://webpack.github.io/docs/code-splitting.html
or write own solution from scratch (loader/plugin).
Don't do that what you want!
If you do want to find a weird trick to get what you want, try including your big JS file dynamically. See here or google jquery getscript. No additional Webpack actions required.
If not, please, continue reading.
You're dealing with the problem from the wrong perspective.
First, make sure you are doing all the obvious HTML/HTTP stuff:
You're downloading the gzip-ed version of the file (if not, google http script gzip)
You're including the <script> tag at the end of the body. This will start downloading and parsing JS only after HTML has been rendered.
Then, the most important, try to figure out where is the 30MB coming from. It's unlikely a fair sum of all your big fat dependencies. Usually, it's a particular bloated library (or two). Make sure you use got instead of request because the least is bloated. Find alternatives for the out-sized dependencies.
No single SPA in the world should have a 30MB JS bundle. I'm assuming your project isn't very large because otherwise it would be business critical and you would invest into providing a decent back-end strategy (e.g. code splitting, dead code elimination, etc.).
1) The similar problem can be solved with Webpack code splitting functionality.
The idea is that you don't load route specific code and libraries until the user accesses the specific page.
2) Take a look at this: script-ext-html-webpack-plugin, looks very promising to do these kinds things. For example, defer options would be for modules or scripts that you want to delay the execution. Async would be for scripts that you want to execute as HTML gets executed. Be careful though about race conditions.
3) You mentioned that you use libraries that are so big, make sure you use Webpack with tree shaking. If you use the old Webpack (version 1.*) which does not have tree shaking, you should try to optimize imports manually. For example, instead of import _ from 'lodash' it would be import map from 'lodash/map'.
4) You also mentioned that it is the ram that is the problem, so how compression can help ram? compression can help the browser to retrieve it faster.
5) The other idea would be:
Load the scripts that you need for the home page
execute them. at this point, the user sees the functioning page
then behind the scenes load other scripts slowly without the user to notice it.
evaluate loaded code as it will become needed for the user.
We have a React Native app that has a lot of hi-res images and videos. We are inching closer to the 100MB limit for the Play Store. What is the current solution for downloading additional assets to the device and how does ReactNative then access them? I've found some modules that can download to the device's downloads folder, but am not sure what the approach should be for actually reading those files at run-time.
For example, we want to download some additional *.mp4 files from the web, so the app has them available for display instantly.
To store files in the internal storage of the device you need to use something like react-native-fs, trying to make your own version of something like that, failsafe and tested could take some time, so it's better if you just can use that.
For browsers that don't support SVG, I'd like to show a static image of a chart instead of an interactive version.
One idea is to generate all possible chart states (around 300) beforehand. I tried using the Canvas2Image library but it doesn't seem to allow me to specify a filename. Is there any workaround? Perhaps a server-side solution?
There's a couple other ways to solve this.
rsvg is a rendering library that processes SVGs statically single-pass. It's used in ImageMagick's convert tool, and also has python and other bindings. Some people find various SVG-isms aren't supported, but rsvg gets updates now and then so best to just try and see.
inkscape is a GUI program that includes SVG->PNG conversion. But it can also be used exclusively on the command line (no X11 required). See man inkscape for all the command line options that can be used to process your svg's; it's quite flexible. The rendering is relatively fast. The main downside is that being a GUI program it has a lot of dependencies, that might not be present on a web server.