Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to solve the problem of Loading Chunk Failed in Vue development". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to solve the problem of Loading Chunk Failed in Vue development" can help you solve your doubts.

Error reporting phenomenon

One day, there was a Loading Chunk Failed error when I clicked on the tab. After my Baidu analysis, I judged that the asynchronous component was replaced by the old resources when sending the package, and then found that the problem still existed after a CV operation, so I explored as follows.

Cause of occurrence

The user goes to the page before sending the package (that is, the request is sent to index.html), and you can know in index.html that the name of the asynchronous component to be requested in the future is a.js. When the server sends the package at this time, it empties out the a.js resource and changes its name to a1.js. After sending the package, when the user clicks on the component corresponding to a.js, the browser goes to the server to request resources with the name a.js that was previously learned in index.html, and gets the above Loading Chunk Failed error.

In the normal production launch process, there may be static resources and pages belonging to different servers. The static resources (various js,css, pictures) should be fully deployed first, and then the pages should be deployed without emptying the old resources. But if you empty the old resources, it may lead to an error.

If emptying and overwriting old resources may be taken in the test environment, the front end must be controlled at this time.

Solution idea

When listening for a routing error, the front end forcefully refreshes the page and reacquires the index.html and the corresponding static resource path.

Set preFetch to request resources when the network is idle, which can greatly reduce the probability of reporting errors.

Trigger bug

If you want to solve the problem, first of all, you have to reproduce the problem, which is a little awkward when it comes to testing and verification, so provide the next personal thinking.

The most direct thing is to open a page, disable caching in the console network, and then send the package to other asynchronous components to trigger bug.

If you want to trigger the onError hook, just disconnect the devServer.

Local reproduction is to open a local server, and then enter the page, delete the corresponding js file in the dist folder can be triggered.

Code implementation

/ * regular use of'\ S 'instead of'\ d'in order to adapt to the friend who writes magic notes, the match is not successful when writing'\ d 'magic notes. * use the reload method instead of replace because replace or to request the previous js file will result in a cyclic error. * reload will refresh the page and request the latest index.html and the latest js path. * modify location.href directly or use location.assign or location.replace, in the same way as router.replace. * the original js file is still requested in the current scenario, except for the browser's history stack. Therefore, we must adopt reload. * A feature of reload () is that when you report an error when you try to enter page B on page A, it will refresh page A, so you need to write logic manually after refreshing. * enter page B and write in the router.onReady () method * in order to avoid unlimited error refresh caused by resource loss on the server in special cases, one-step control is made and only try to enter page B once. * if not successful, just refresh the A page and stay on the current A page. * / router.onError ((error) = > {const jsPattern = / Loading chunk (\ S) + failed/g const cssPattern = / Loading CSS chunk (\ S) + failed/g const isChunkLoadFailed = error.message.match (jsPattern | | cssPattern) const targetPath = router.history.pending.fullPath if (isChunkLoadFailed) {localStorage.setItem ('targetPath') TargetPath) _ window.location.reload ()}) router.onReady (() = > {const targetPath = localStorage.getItem ('targetPath') const tryReload = localStorage.getItem (' tryReload') if (targetPath) {localStorage.removeItem ('targetPath') if (! tryReload) {router.replace (targetPath) localStorage.setItem (' tryReload', true)} else {localStorage.removeItem ('tryReload')}}) This article "how to solve the problem of Loading Chunk Failed in Vue development" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.