Detailed explanation of a solution to a loading chunk {n} failed problem in the Vue project

Recently, there is an error in Loading Chunk {n} failed , and the error comes from the WebPack for Code SPILT, some bundle files Lazy Loading failed. However, the root cause of this problem is not found, because the occasion of this problem is too high, and some mobile phones will appear, some will not appear, use the simulator, it will appear with the real machine, I don’t know if it is Network cause or WebPack’s bug. Can’t find reasons and solutions in a variety of places such as GitHub, Stackoverflow, which is a discussion on this issue on GitHub: Loading Chunk {n} failed # 742, although it is not there, you can refer to it.

This problem has a probability that the probability is relatively small, but once the appearance will cause the page to crash, so it is still resolved, and it will be resolved. The following is posted:

My thinking is that I can’t find an error The reason is that attempts to capture this error and do fault tolerance, there are two implementations, one is to capture this error in the server, one is captured at the front end.

Service Directory The reason for the error is that some JS bundle is not found, so determine the JS first when the server receives the JS file. Whether the file exists, if there is a direct return JS file, return a prompt message to the front end if there is no existence, let the front end processing. Suppose the service is used as the static file server, the code is as follows:

app.all (/ \. Js $ /, (req, res) => {const filename = Req.path.slice (req.path.lastIndexof (‘/’) + 1); const filepath = path.resolve (__ DIRNAME, ‘./public/static/js/’ + filename);IF (fs.existssync) {fs.sendfile (filepath);} else {res.sethead (‘content-type’, ‘application / javascript; charSet = UTF-8’) Res.setHeader (‘Accept-Ranges ‘,’ Bytes’) Res.SetHeader (‘Transfer-Encoding’, ‘Chunked’) Res.SetHeader (‘Last-Modified’, New Date (). Toutcstring ()) Res.SetHeader (‘cache-control’) res. extend (‘Window.serverRebuildHook && Window.serverrebuildHook ();’)}});
When the JS file is not found, a message is returned by
Res.Send (‘Window.ServerRebuildHook ();’)

, and performs front-end definition ServerRebuildHook method. SERVERREBUILDHOK


 window.serverrebuildhook = function () {alert ('server version is updated , Is refreshing local cache, please wait ... '); Location.replace (location.href);}   
method is very simple, suggestive user to update the server and then refresh the current page.

This implementation is answered on the reference github, is relatively complicated, but the user experience is not good, can only refresh the current page, can not jump to the target page.

front-end implementation

As the project which used vue-router, error handling function onError vue-router is not able to capture the error of it? We look at the instructions official document:

详解Vue项目中出现Loading chunk {n} failed问题的解决方法

An error occurred while parsing an asynchronous component when rendering a routing process, need to try. Fully in line with our scenario, so we implemented method onError following code:

 router.onError ((error) => {const pattern = / Loading chunk (\ d) + failed / g; const isChunkLoadFailed = error.message.match (pattern); const targetPath = router.history.pending.fullPath; if (isChunkLoadFailed) {router.replace (targetPath);}});   when 
when captured

Loading chunk {n} failed of the mistakes we re-render the target page, this implementation significantly simpler and friendly.

If a finding has led to the subsequent

Loading chunk {n} failed The essential reason will then update herein, please pay attention!

The top is the whole content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment