Webpack + React路由器动态路由-如何使用require.ensure捕获需求加载异常 [英] Webpack + React router dynamic routing - how to catch require loading exception with require.ensure

问题描述

我正在使用react / react-router / webpack堆栈，并在应用程序的不同页面之间进行动态路由，这意味着每个页面都可以按需异步加载。一切正常，但是当我部署新版本时，一旦我尝试导航到他们尚未访问的其他页面，则当前未获取所有页面的所有Js文件的活动用户将被卡住。

I'm using the react/react-router/webpack stack with dynamic routing between my different pages of the app which means every page loads asynchronously by demand. Everything works great but when I deploy a new version, my current active users who didn't fetch all of the Js file of all the pages will get stuck once the'll try to navigate to another page they haven't visited yet.

示例

可以说我有一个代码拆分应用使用以下.js生成的文件和md5（用于缓存清除）：

lets say I have a code split app with the following .js generated files and md5 (for cache busting):

main.123.js
profile.456.js

用户访问我的主页并仅获得 main.123.js 。

User visits my main page and gets only main.123.js.

与此同时，我部署了具有不同版本的新版本md5（我在profile.js和main.js中都进行了更改）

In the meantime I deploy a new version with a different md5 (I made changes both in profile.js and main.js)

main.789.js
profile.891.js

用户尝试导航到个人资料页面，应用尝试获取 profile.456.js ，但是由于profile.js文件已被交换，并且应用程序现在有办法知道新文件名，因此会出现错误。

User tries to navigate to the profile page, the app tries to fetch profile.456.js but get an error since the profile.js file has been swapped and there is now way for the app to know the new file name.

我想出了2个解决方案，但没有一个能真正解决问题

I came up with 2 solutions but none of them really solves the problem

解决方案1个？
始终在生产中保留2个版本。但这是一个滑坡，因为有时2个版本可能还不够。即，用户可以将其标签页打开几天，以便进行多次部署，直到他决定再次使用该应用为止。

SOLUTION 1? Always keep 2 versions available in production. but it's a slippery slope since 2 versions sometimes won't be enough. i.e User can leave his tab open for days so several deployments can take place until he decides to use the app again.

解决方案2？
捕获js加载异常，并向用户显示一条消息以重新加载该应用程序。此解决方案可以工作，但是如果您问我，它会是一个烦人的用户体验。

SOLUTION 2? catch the js loading exception and show the user a message to reload the app. This solution can work but it's an annoying UX if you ask me.

有人遇到过这种问题吗？有什么建议吗？

Has anyone experienced this kind of issue? Any suggestions?

编辑-解决方案：
我决定采用第二种方法（解决方案2）。为了捕获加载错误，由于require.ensure实施不支持捕获require文件异常，我不得不将我的webpack升级到webpack 2。使用webpack 2，我可以使用 System.import 支持错误处理。所以基本上我所做的是：

EDIT - SOLUTION: I have decided to go with the second approach (solution 2). In order to catch the loading error I had to upgrade my webpack to webpack 2 since require.ensure implementation doesn't support catching require file exception. With webpack 2 I can use System.import which supports error handling. So basically what I did is:

使用 System.import 动态加载组件：

function getMyComponent(nextState, cb, path) {
    return System.import('components/myComponent').then(module => {
        cb(null, module);
    });

}

并捕获错误：

function getAsyncComponent(getComponent) {
    return function (nextState, cb, path) {
        getComponent(nextState, cb, path, store).catch(err => {
            store.dispatch(notificationSend({message: <span>Uh oh.. Something went wrong.}));
            cb(err);
        });
    }
}

<Route path="foo" getComponent={getAsyncComponent(getMyComponent)}/>

推荐答案

我会选择＃2的变体，在检测到服务器上不再存在路由文件后，您可以使用 window.location.reload（true）为用户进行刷新。那应该进行一次硬刷新，以加载新文件。

I would go for a variant of #2 where, upon detecting that a route file no longer exists on the server, you do a refresh for the user using window.location.reload(true). That should do a hard refresh which will load the new files.

这篇关于Webpack + React路由器动态路由-如何使用require.ensure捕获需求加载异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！