Webpack chunks are not reloaded on deploy - javascript

I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2

Related

Angular7 slow page load

I have an Angular7 app that was passed onto me. The First Contentful Paint and Time to Interactive is about 6 seconds! It seems to stall(pending) for about 4 seconds on https://www.google-analytics.com/collect and https://fonts.gstatic.com/s/opensans API call, which I found is related with google fonts. But this might not be the cause of the stall. I tried to use lazy loading modules to get bundle smaller. Currently we are at: styles.css 465B, runtime.js 1.1kB, polyfills.js 36kB, styles.js 10kB, vendor.js 583kB, main.js 142kB. Bundle size doesn't seem to be an issue but browser(chrome) still stalls for 6 seconds before user see the home page. Does anyone have any advise?
I also looked at SSR but it seems to be very complicated to setup considering we are serving on AWS S3 using content in dist. I am building with:
ng build --outputHashing=all --prod
Please help. I am want to make sure there is nothing else I can improve on before trying SSR. Thank you!
First of all, you can try and update Angular version to the latest, as it brings performance upgrades and bug fixes. That is what I would do before SSR. Nevertheless, SSR is a "must", if you want better user experience. Considering your bundle size, it is not so big. My app is triple size as yours and it loads faster. As I said, I render on server (SSR) and using v9 so far. But is very hard to answer the question without any code samples.
Cheers!
You can try to optimize your code a bit and use the AOT compilation mode in the time of building.
I found a good article, you can explore this and understand in what way exactly you can improve your code and reduce loading time.
https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application

What am I doing wrong with Angular js manual bootstrap process?

I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too

Javascript files not loading consistently?

We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".

MVC Bundle fails to load

We're having a strange problem that we can't seem to find a cause for. What seems to happen is the javascript and css bundles no longer load on the page.
When we initially navigate to the page everything seems to be working fine. After two page refreshes the page loads without any css and the javascript files are loaded incorrectly. Navigating to the javascript file in the browswer shows it loaded like this:
‹������ì}{·Ñàÿú°£÷È)JNÚk„ö#[ÊEï9–Î’›·§ªéŠ\I›P\–»´¬Ôêg¿™Á¯,vIÊŽÓ÷ëéÓ˜`�ƒù…Áöç6ÔçêYQTe5OgêÍ—ý/ûPÝ«ªš
¶·/³êÜ–õGÅu‚µŸ³Ûy~yU©/v?Þ‚ÿû£:¹É«*›÷ÔÁtÔÇJ/òQ6-³±ZLÇÙ\ýpp¢–5¯®ço»º9/·]Ûç“â|û:-Ôö‹ƒçû/÷±ËíüBu«ÛYV\¨ŸÿÏ"›ßªáp¨:ý"ŸfãN¢þ¹¡Tu5/nÔ4»Qûóy1ïvÜÔþÚ)Õ¦oÒãÑ<ŸUjžýc‘ϳÒ#ë$w.ÓQ•SÕÝÔð:‹2SÐ>Uoà÷›t®ÞdóëÕfÿbÚÿù Î&yÕí¨Nrºsfõ®R8ö®i…ê[õ…úÿÃÂ9}Œ¾NÔ»wŠ×‚é=ªÁ§¯ù§/°åãDõþ“w3zÜÿºÿXsuË›Íiðww]]-ùfccûsÄûù„7PðÿÓ2Gä÷.
b•JÜþ¦SÒt¶?ómKlò!Gøñ‰ýƒ
ŸöÍRš†ÛÛêùñ±:yµûòøàäàð¥:~}ttø
fq|U,*øßÀ®ÃÍÍMÿº€YNó_ç4«DCx/D7L¿˜ûÓq×Ò6n¼l{n\Œ×Ù´êæYZeû“u;¯#µ®Á0ûo ÎËôH~h�õcvþK^¸îÔ#un‚oжÓ3õ(~e•áêûÁf¬æ¡¬G5Tñ–UаÞU¼ÓS¼€­ÚÅyNajŸF書é"Ê&ý²ºd§ØàL=�"qÔ×TÀ ªÅ|ªþ© ÇAªigÜñA™¶éÈ#{¼p”W4Ú<ûJu•êÿÔ×¼EÓŽ¡-Ø—ýt’½½NG£ô†¨kT–[b{k¦›]/&°ú§CODÝñbžâ¿8ýŒÒÉ$£j86÷y“誺ÊKú´ÙÅ&}#7PUÐë#{Õ|‘©»DôužŽ~ƒÂ¸t³ú‚Γ>ìÅËËlÞÝì—‹Ù¬˜W}Æ
a ƒá2«Nòëöc×Âï)7SŽ}3BðfWŒ#O2ÒÍBì=½ 4âXƒÄô¶a#fHpôe£<ôÔ±wžOÇ'p–TÓ„ívg“ì×y¥ÚWét
The entire page is like that.
My best guess is that somehow the files are being compressing twice and the browser is only decompressing once. I don't understand why on initial page load everything is working correctly.
Notes
We've tried setting debug = true and debug = false in the config, which has not seemed to work.
Our dev and local environments seem to work fine but prod and staging environments do not work.
The web config files are identical between environments except for connection strings.
It would be great if someone could help us out. Even better if it's just something easy and stupid to fix.
Thanks in advance
So I got something working, it appeared that somehow one of the javascript bundles had duplicated (kind of a weird process as we have internal nuget packages containing bundles along with the web application also containing budles...). I'm not sure why this was causing the strangeness in the files being delivered, but once I removed the duplicated bundle it appears there is no longer an issue.

heroku messing up image formatting

i am having trouble with heroku messing up my image formatting. i don't get any image problems in my localhost development.
so if you visit novulty.herokuapp.com/services and scroll to the 'our results' section, you'll see that some of the logos are wrongly formatted. if you keep refreshing the page, you'll see different logos get wrongly formatted. i am really not sure what the case is.
i've tried precompiling my assets (rake assets:precompile) but that doesn't seem to be do the trick. next, i thought it was an issue of loading my javascript later as opposed to earlier in the file, but if i load it in the beginning (in the <head>) the javascript doesn't even work... so i am very confused.
feel free to take a look at my code at https://github.com/sambaek/novulty
could anyone help me? thanks!
UPDATE:
this problem is happening on localhost. a lot less often though. i wonder if it's a javascript/css issue or rails/heroku one?
It's likely your issue has to do with running in Production versus Development, and the order in which your assets are being read. In development, the order works, but in Production, where your css and javascript is likely all concatenated into single files, you might be overriding classes and having other conflicts.
To test this theory, just run locally your app in production. I don't do this often, but the commands are likely
RAILS_ENV=production rake assets:precomiple
RAILS_ENV=production rails s
Assuming that you'll see the same errors, you might next figuring out if its your CSS or javascript. Inspect your images and make sure the classes and attributes are as you expect. Check for overwritten classes.
Lastly, if still an issue, I'd focus on your javascript. Remember that if you put it into multiple js files, they'll all be combined into 'application.js', assuming you are using the default setup. If you have a developer mode on your browser (I use Chrome), check the javascript inspector to see for any errors.

Categories