I have a very small page in next.js that simply says Finding you a game...
I need it to render almost instantaneously.
The problem is, it needs to load some heavy libraries to find the game in the first place.
Currently, next.js is loading those libraries before showing Finding you a game....
What I want to do is to mark all the dependencies as async or defer so that the page renders first and then the dependencies get loaded.
How do I do that?
Related
I'm using scala.js to create javascript code to be run in a browser, served up by an akka-http server. I had it mostly working using mill as my build tool, but then wanted to switch to sbt so I could use the ScalaJSBundler plugin for npm dependencies and packaging. Using sbt, when I do a fastOpt to compile my scala.js code, javascript code is created slightly different than what mill created and it now includes require statements (which the mill build didn't) such as
var $i_react = require("react");
When this code is run in my browser require comes up as undefined. Also variables I have exported in scala.js come up as undefined. I thought this was because the code being created was for ModuleKind.CommonJSModule (set via the sbt setting scalaJSModuleKind), but when I try to change that to ModuleKind.ESModule the build fails with:
scalaJSModuleKind must be set to ModuleKind.CommonJSModule in projects where ScalaJSBundler plugin is enabled
I'm new to javascript (and scala.js). What am I doing wrong? How should this be done?
Thank you!
As described in the Getting Started of scalajs-bundler, you should serve the result of webpack/fastOptJS to the browser, instead of fastOptJS. This is necessary because the latter is emitted as a CommonJS module, unsuitable for the browser, but then processed by Webpack to produce the former, a bundle suited for the browser, also containing the npm dependencies.
i am loading the bootstrap and jquery packages from nuget:
but i get an error message in chrome console saying that
$ sign is not defined
do i need to referense the jquery lib file, from the aspx page?
if do so, what happen when jquery gets updated, his file name will update too?
In short, yes. You will need to reference the jquery file in every page you use it in. Alternatively, if you are using a _Layout page, you only need to do so once. In terms of the updating issue, your jquery file should not update automatically so you should be fine.
You could also make sure you have jquery migrate installed so that you never have deprecated or code breaking errors in your program. jQuery Migrate
Also consider using jQuery CDN rather than having the files stored locally as this can make updating and upgrading far easier
I'm interested in splitting my initial code in two chunks which are loaded asynchronously by the application using async/defer attributes. One for vendored libraries which rarely change and are big so that they could benefit from caching for a longer time, and another one containing the basic code required to load the initial page. This would be a smaller chunk which would probably change every week since we often deploy changes to production.
But we are interested in displaying a proper "loading..." page until all JS resources are downloaded. In case the app JS finishes loading before the vendor one (when vendor is not cached, this is very likely to happen) it should wait for the vendor one to be loaded.
I wasn't able to figure out how to achieve this using webpack. There are examples loading the vendor chunk synchronously so that the app code will always load after vendor, but it means the app won't render the proper "loading..." page due to it being blocked by the JS script. I could add the script to the end of the body but it's not optimal because it will increase the latency for the scripts to start downloading in comparison to adding the async script tags in the head of the document.
The code splitting documentation has an example on how to generate the vendor and app JS, but it only works if vendor is loaded before the app JS. Is there any way I can instruct the app bundle to wait for vendor to be loaded before running?
I've been investigating ways to make my Meteor app load faster and so I installed the FastRender package (https://meteorhacks.com/introducing-fast-render.html) and I couldn't believe how quick my Meteor app loads now. It's also rather trivial to add in.
I'm just wondering why this package is not just added by default and work implicitly (instead of having to go fastRender:true, it would be true by default and you would have to go fastRender:false to turn it off). Is there any disadvantage to having this package or any use case where I would not want to turn fastRender on?
Please refer to the fast render page, especially the section "Fast Render exposes some security issues that are not normally issues with Meteor. The following section describes what they are and how to prevent them. Some of the issues have been already fixed.". Fast render is not maintained by the meteor core team, hence it will not be (as of now) a pre-bundled component to the meteor stack
I have installed the latest version of Ajax Control Toolkit, it is loading 150 ScriptResource.axd files approx. which is taking long time to load which in turn is making my website very slow, please suggest how to overcome this issue?
The latest version of Ajax Control toolkit is loading all the scripts by default, you have to code manually so that you can load only the required scripts for the used controls on the page. For Achieving this functionality, you have to create AjaxControlToolkit.config to define the bundles which in turn can be used by the individual pages. Please follow the below links it explains all the functionality that is required by you:
http://stephenwalther.com/archive/2013/07/25/july-2013-release-of-the-ajax-control-toolkit
https://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#SampleWebSites/AjaxControlToolkitSampleSite/AjaxControlToolkit.config