Should next.js be deferred (common.js, main.js) #1436
Comments
|
🤔 AFAIK If you defer the parsing of common.js and main.js and try to parse (and execute) the code for your view you are going to have an error because your view code depends on common.js and main.js code to work |
|
First page load is server rendered. So do need common.js and main.js to run until, after the site downloads? I am just curious. |
|
@khrome83 You are correct. We can't async those scripts since they need to be load in sequence. But we can defer them. |
|
@arunoda the most bulletproof solution to deferring scripts that I've come across is this: https://varvy.com/pagespeed/defer-loading-javascript.html As the article explains, adding the the Hope this helps :) |
|
@wagerfield thanks.
|
|
Thank you @arunoda for getting this in. |
|
@arunoda did you read the article? Adding the This isn't an archaic method for supporting IE9—this is a behaviour that the latest version of Chrome and other modern browsers experience. If you take a look at the various examples he put together, you will see that adding the https://varvy.com/pagespeed/defer/defer-example-defer.html In Chrome you will see the loading spinner on the tab where the favicon normally is persist for 2-3 seconds while the deferred script
Furthermore if you open Chrome dev tools and go to the Network tab, you will also see that the page doesn't
If you then take a look at the 'solved' example you will see that a) the browser tab loading spinner doesn't stall and b) that the https://varvy.com/pagespeed/defer/defer-example-solved.html
|
|
@wagerfield yep. I didn't read the article well. I don't like it's use of window.onload but I'll try to use 'DOMContentLoaded'. |
|
@wagerfield Actually, I had to use I think, it's not started rendering yet at that point. Here's the code: <html>
<head>
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
setTimeout(function() {
var element = document.createElement("script");
element.src = "/defer-example-solved_files/defer.js";
document.body.appendChild(element);
}, 0)
}
// Check for browser support of event handling capability
document.addEventListener("DOMContentLoaded", downloadJSAtOnload, false);
</script>
</head>
<body>
<h1>I wait 2 seconds then ...</h1>
<p id="inner"></p>
</body>
</html> |
|
In what way would it be better to use setTimeout, 0 with DomContentLoaded than relying onLoad @arunoda ? What is there not to like about onLoad? Its been proven since 1999 or something. |
|
onload is working properly and it runs after all the resources in the page completed. That's good for external scripts. But this for our main JS bundle. We need to load as soon as possible without rendering the bundle. I face an issue currenly because I nees to load two scripts in sequence. But I can't download them in parallel. I am thinking ways to do it now |
|
I think react server uses LABjs. Load and block for them to get correctly sequenced. You might take a look at that. It's from yahoo. |
|
Thanks @ptomasroos Yeah! Labjs is kind a interesting and something I was looking for. So, I'm going with the |
Should next.js defer parsing of JS for the common.js and main.js bundles?
Not familiar with the architecture or how to do this, but it came up as a performance issue.
All but 1.5kb was from common.js and main.js code.
The text was updated successfully, but these errors were encountered: