-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Description
Do you want to request a feature or report a bug?
Feature, or discuss first.
What is the current behavior?
Assume there are some Dll or CommonChunks file, we usually put it in HTML script:
<script src="./dll/common.bundle.js"></script>
<script src="./commonChunk.bundle.js"></script>
<script src="./entry.bundle.js"></script>Once the entry.bundle.js was loaded, the code will be launched and believe other runtime external dependencies(dll, commonChunk) are already exist.
If this is a feature request, what is motivation or use case for changing the behavior?
What if the previous script load failed?
They may fail to load due to enter the weak network occasionally, or some area's CDN breakdown, even hijacked by network provider which cause the script broken and blocked by CSP (very common in China mainland).
We will see that the entry will be broken and throw error directly due to lack of dependencies:

Currently we have neither ability to guarantee them load done by any webpack way, nor occasion to reload the failed ones before startup. If there are any hooks that let we have ability to inspect and reload them (such as use another CDN), It will help us prevent the page from becoming unusable.
Actually, the page I'm maintaining which have aproximately 20 million PV in China mainland and can met a lot of error reported about it every day because of the terrible network and telecommunications environment (hijacked, CDN timeout, network switch frequently). We do need a retry and assurance mechanism to improve the usability of some unlucky users.
Sorry if tl;dr.
the one implemetation I can imagine is extract the bootstrap code inline to the HTML page, and also with the external chunks list analyzed from the entry. So that we can check whether the necessary dependencies are all present before we startup (not sure whether can implemented by write Plugins):
<script src="./dll/common.bundle.js"></script>
<script src="./commonChunk.bundle.js"></script>
<!-- only modules, but extract the bootstrap code. -->
<script src="./entry.bundle.js"></script>
<!-- only modules, but extract the bootstrap code. -->
<script>
//Extracted from entry or commonChunk
var bootstrap = (function(modules) { // webpackBootstrap
/*......*/
});
//Analyzed by plugin
var externalChunksList = /*...*/;
//Generated by plugin, should let users setting their own handler
if(hasAllExternalsInstalled()) {
bootstrap(/*...*/);
}else{
tryReloadMissingChunks().then(() => bootstrap(/*...*/)).catch(e => /*...*/);
}
</script>Please feel free to indicate my mistake. I'm also looking forward to more brilliant proposal.
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack 3.0.0 with all platform.
