Reduce Loading Time of 0.chunk.js in React App - javascript

I am creating a react app. There is a js file 0.chunk.js having size around 1.5 MB, and it takes over 30s to load which delayed my app to load.
I want to know how can i reduce the loading time?
I am using jsPDF and html2canvas to generate some pdf and it seems it increasing the size of chunk i-e 1.5MB. I am already using Webpack. I have also created a seperate component for pdf generation.
Is there any way i can reduce more the chunk size?

Use React Router concept and by setting the conditional import statement you can prevent unwanted loading of files. It will be loaded only when we need

Related

What should I do to speed up my vue.js project?

When my web application is loading for the first time on a browser it takes from 15 to 20 seconds to finish loading.
Here is My web application speed test on page speed insights.
I removed as much unused JavaScript and redundant code as I could
For text compression problem my application is already generating gzipped .js and .css files according to build results (Please correct me if i am wrong in this point)
Do I need to setup webpack in my application or my application is already doing everything it does
I am adding couple of points you can try it, it might helpful.
Virtual Scrolling - Use virtual scrolling it only renders required data, it will increase your perfomance.
Render Once - This keyword is from vue js documentation , v-once -> You can use this keyword where element should always rendered once.
Ex: <span v-once>test</span>
Eliminate Duplicate Rendering - This point will also help in perfomance.
Remove unused packages and components.

White screen on initial load when updating my progressive web app

I'm using create react app and recently added a service worker so as to make it a PWA. It was very easy and seemed to work great. However, now whenever I build a new version of my app I get the following error on the initial load of the website:
I believe the problem is that when I build my app the file names are randomly generated and don't match the old ones. The PWA is using the old index.html trying to fetch the old files which don't exist anymore.
What is the best way of fixing this?
It turns out that the js file is too large to be precached. There are two approaches to solving the problem:
split the bundle into smaller chunks (each <5mb)
eject from create react app and increase the maximumFileSizeToCacheInBytes
You can read more in this StackOverflow answer:
Create React App serviceworker is not including one of the generated files

Load Angular data after DOM

I am looking for a way to speed up my website by loading content that is not required to display the main DOM afterwards.
My webpage is loading 2.8MB of ressources where 879kB are actually transferred. (gzip)
I am aware of the possibility of loading only the required components, but if I do so, I'll have the same problem after a user clicks any link to another component.
Basically what I want to do is loading my main component and displaying the DOM immediately.
After DOM is loaded, I want to load the other components as usual.
Is there a NPM package that does this?
If not, how can I realise my desire?
Use lazy loading modules to load them only if needed. It will greatly decrease bundle size:
https://angular.io/guide/lazy-loading-ngmodules
Application should be split to separate modules and routing is modified not to load them eagerly
What you are describing sounds like server side rendering. You should check out Angular Universal.
https://angular.io/guide/universal

Will react-router affect page load time?

For example, if I have 3 routes in the routes.js file compared to that of 10 routes in the same file. Will the file containing 10 routes take longer time to load? Supposing every route import the same size of the component. Or the component will be imported after we've enter the route?
The first page load might be slightly longer than usual (still probably not even noticeable in most cases), but after that, the page will be entirely cached, resulting in super fast load times, since the browser will remember everything.
If you bundle your app (e.g. with webpack) and you are not lazy-loading your components, then the components itself won't add up to your load time. But probably on your performance.
But when all of your - let's say - 10 components load resources over a RESTful API, then of course your components will indeed add up to your load time.
This could be prevented by using GraphQL + Relay though.

Loading a medium sized JSON file in Electron renderer takes too much time

I am building an app in electron-vue that requires loading a 56MB JSON file (from a third-party that gets updated every few months) on launch but will be used throughout the entire app's life cycle and will be queried a lot by the renderer process(es). The JSON file is stored on disk between each update, so it's only downloaded once every few months.
Loading the file in the main process is pretty fast but loading it in the front-end takes 8-10 seconds! I don't believe this is reasonable for a relatively small file.
I have tried loading the file in main, attaching the resulting object to the main window and retrieving it using remote. This causes the app to just hang. I've looked into IPC but it seems you can't send messages from main to renderer. I've also looked into streaming JSON parsers (Oboe.js), but I don't think it would be a benefit since I really need the top level elements at launch (I can't do anything with nested elements as they are parsed).
Does anyone know of a faster way of loading JSON in the renderer or perhaps a way of sharing the parsed object loaded by main?
Thanks in advance.

Categories

Resources